uniapp——弹出键盘遮挡住输入框 textarea,处理方法

案例

在写输入框的时候会遇见 键盘遮挡住部分textarea框的一部分,使用cursor-spacing处理即可
在这里插入图片描述

修改后:

在这里插入图片描述

在这里插入图片描述
其他问题:
调起键盘输入时,不希望上方的内容被顶上去
在这里插入图片描述
在这里插入图片描述

代码

<view class="commentBox" :style="'bottom:'+KeyboardHeight+'px;'"><textarea placeholder="请输入评论" v-model="pingLun" confirmType="return" maxlength="-1" auto-height:focus="focus" @blur="onBlur" cursor-spacing="15" :adjust-position="false" class="area" :fixed="true" /><button :class="{'sendBtn':true,'greyColor':!pingLun}" :disabled="!pingLun">发送</button>
</view><!-- 评论按钮 -->
<view class="funcBtn pinglun" @click="onfocus"><image src="/static/images/circle/comment.png" mode="aspectFill"></image>评论
</view>
const pingLun = ref('') //输入评论内容
const focus = ref(false) //默认不聚焦
const KeyboardHeight = ref('') //键盘高度
onReady(() => {uni.onKeyboardHeightChange(res => {KeyboardHeight.value = res.height;})
})
onLoad((options) => {// 如果来自于评论if (options.fromType == 'comment') {focus.value = true}
})
// 评论聚焦
function onfocus() {throttle(() => {focus.value = true})
}
// 失焦
function onBlur(){focus.value = false
}
.commentBox {display: flex;justify-content: space-between;align-items: center;padding: 0 40rpx;background-color: #fff;border-top: 1rpx solid #D8D8D8;position: fixed;left: 0;bottom: 0;width: 100%;box-sizing: border-box;z-index: 99;.area {font-size: 26rpx;width: 100%;padding: 30rpx 0;margin-right: 20rpx;max-height: 120rpx;}.sendBtn::after {position: unset !important;border: unset;}.sendBtn {flex-shrink: 0;margin: 0;padding: 0;line-height: 1;color: #F364B3;font-size: 28rpx;background-color: #ffffff00;}.greyColor {color: #F364B340;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/10109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爬虫学习(4)每日一笑

代码 import requests import re import osif __name__ "__main__":if not os.path.exists("./haha"):os.makedirs(./haha)url https://mlol.qt.qq.com/go/mlol_news/varcache_article?docid6321992422382570537&gameid3&zoneplat&webview…

Linux 认识与学习Bash——3

在Linux bash中&#xff0c;数据流重定向是指将命令的输出从默认的标准输出&#xff08;通常是终端&#xff09;重定向到其他位置&#xff0c;如文件或另一个命令的输入。这是通过使用特定的符号来实现的。例如&#xff0c;>用于将输出重定向到文件&#xff0c;而<用于将…

Proxmox VE 8 用SDN隔离用户网络

作者&#xff1a;田逸&#xff08;formyz&#xff09; 最新发布的Proxmox VE&#xff08;以下简称PVE&#xff09; 8在Web管理后台集成了易于操作的SDN&#xff08;软件定义网络&#xff09;功能插件&#xff0c;其实质是对不同的PVE用户指定不同的网络&#xff0c;进行逻辑隔离…

[移动通讯]【无线感知-P1】[从菲涅尔区模型到CSI模型-3][Mobius transformations-7】【Inversion】

前言&#xff1a; mobius map 里面比较难的是inversion &#xff0c;林菲尔德学院&#xff08;Linfield College&#xff09; Michael P. Hitchman. 有本书详细介绍一下该方向的一些原理&#xff0c;例子. Whitman College Book: 《Geometry with an Introduction to Cosmic T…

el-select选项框内容过长

利用popper-class实现选项框内容过长&#xff0c;截取显示功能&#xff1a; <el-select popper-class"popper-class" :popper-append-to-body"false" v-model"value" placeholder"请选择"><el-optionv-for"item in opt…

初识 Linux线程

再学习完Linux进程后,本期,我们来讲解Linux线程 1.为什么需要线程 在之前学习进程前,我们写的所有代码几乎都是单个执行流的,也就是说我们的代码只有一条路走. 在学习进程后,我们可以通过fork进行进程创建,给进程分配任务进行多执行流执行任务,问题来了 那我们为什么还需要…

清空回收站是彻底删除吗?一文解答你的疑问!

“我刚刚本来想在回收站中恢复一个文件的&#xff0c;但是一不小心就清空了回收站&#xff0c;想问问清空回收站是彻底删除吗&#xff1f;清空了回收站文件还有机会找回吗&#xff1f;” 在使用电脑的过程中&#xff0c;我们经常会将不再需要的文件或文件夹移动到回收站&#x…

数据结构与算法学习笔记六-二叉树的顺序存储表示法和实现(C语言)

目录 前言 1.数组和结构体相关的一些知识 1.数组 2.结构体数组 3.递归遍历数组 2.二叉树的顺序存储表示法和实现 1.定义 2.初始化 3.先序遍历二叉树 4.中序遍历二叉树 5.后序遍历二叉树 6.完整代码 前言 二叉树的非递归的表示和实现。 1.数组和结构体相关的一些知…

AUTOSAR OS调度表讲解

调度表 AUTOSAR OS通过调度表(Schedule Table)来解决一个alarm只能激活一个任务的限制。调度表是预定义的行为序列,通过到期点实现。AUTOSAR OS遍历调度表并依次处理每个到期点,遍历由底层的counter来实现驱动。 到期点发生在从概念零开始的静态配置偏移量上。偏移量在静…

【程序设计和c语言-谭浩强配套】(适合专升本、考研)

一晃大半年没更新了&#xff0c;这一年一直在备考&#xff0c;想着这几天把前段时间学的c语言给大家分享一下&#xff0c;在此做了一个专栏&#xff0c;有需要的小伙伴可私信获取o。 简介&#xff1a;本专栏所有内容皆适合专升本、考研的复习资料&#xff0c;本人手上也有日常…

【2024亚马逊云科技峰会】Amazon Bedrock + Llama3 生成式AI实践

在 4 月 18 日&#xff0c;Meta在官网上公布了旗下最新大模型Llama 3。目前&#xff0c;Llama 3已经开放了80亿&#xff08;8B&#xff09;和700亿&#xff08;70B&#xff09;两个小参数版本&#xff0c;上下文窗口为8k&#xff0c;据称&#xff0c;通过使用更高质量的训练数据…

【基础算法总结】二分查找一

二分查找一 1. 二分查找2.在排序数组中查找元素的第一个和最后一个位置3.x 的平方根4.搜索插入位置 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1…

制造业数字化转型解决方案及应用(125页PPT)

一、资料介绍 《制造业数字化转型解决方案及应用》是一份内容丰富、深入剖析制造业数字化转型的125页PPT资料。这份资料以“智能制造、制造业数字化转型、制造业数字化转型案例”为关键词&#xff0c;全面展现了制造业数字化转型的核心理念、解决方案以及实际应用案例。 关注…

【JS红宝书学习笔记】第1、2章

第1章 什么是JavaScript JavaScript 是一门用来与网页交互的脚本语言&#xff0c;包含以下三个组成部分。 ECMAScript&#xff1a;由 ECMA-262 定义并提供核心功能。文档对象模型&#xff08;DOM&#xff09;&#xff1a;提供与网页内容交互的方法和接口。浏览器对象模型&…

块元素、内联元素、行内块元素

一、介绍&#xff1a; CSS元素划分成块元素、行内元素&#xff08;内联元素&#xff09;、行内块元素等多种常用类型。也就是说&#xff1a;在CSS中&#xff0c;元素根据其在页面上的布局方式被分为不同的显示类型。 背景&#xff1a;HTML负责定义网页的结构和内容&#xff0c…

OC foudation框架(上)学习

foundation框架 文章目录 foundation框架字符串&#xff08;NSString && NSMutableString&#xff09;NSString的其他功能NSMutableString 日期与时间 &#xff08;NSDate&#xff09;2.1 日期与时间&#xff08;NSDate&#xff09;2.2日期格式器日历与日期组件定时器&…

Java入门基础学习笔记8——注释

1、注释&#xff1a; 注释是写在程序中对代码进行解释说明的文件&#xff0c;方便自己和其他人查看&#xff0c;以便理解程序的。 package cn.ensource.note;/**文档注释文档注释 */ public class NoteDemo {public static void main(String[] args) {// 单行注释System.out.…

word转pdf的java实现(documents4j)

一、多余的话 java实现word转pdf可用的jar包不多&#xff0c;很多都是收费的。最近发现com.documents4j挺好用的&#xff0c;它支持在本机转换&#xff0c;也支持远程服务转换。但它依赖于微软的office。电脑需要安装office才能转换。鉴于没在linux中使用office&#xff0c;本…

SwiftUI 调整视图内容周围间隙(Content Margins)的“时髦”方法

概述 在 SwiftUI 开发的应用中,往往在小屏设备(比如 iPhone)上布局良好的 App 放到大屏(iPad)上后就会“一塌糊涂”。因为它们一味的只想着“占据”却不知道“舍弃”。 从 iOS 17.0(iPad 17.0)开始苹果提供了原生的视图修改器方法专注于处理此事。 在本篇博文中,您将…

windows轻松管理nodejs 版本 升/降级 卸载等等

#nvm-windows 管理nodejs 版本神器# 不经意升级了node版本导致原有项目启动异常, 看到了node版本管理神器:nvm-windos 1,先下载 nvm >> git 选择如下安装包或 nvm-setup.exe文件 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.12 2. 双击安装,下一…