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;进行逻辑隔离…

D3.js实战:数据可视化高级技巧实例应用

基础 首先&#xff0c;我们需要一个HTML文件来引入D3.js库&#xff0c;并准备一个画布来放置我们的图表。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"width…

[移动通讯]【无线感知-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…

js 字符串截取,截取指定字符前面/后面的字符串

一个符号截取&#xff1a; let str hello, how are you doing? username! // 截取 ? 前面的字符串&#xff1a; let before1 str.substring(0,str.lastIndexOf("?")) // 不包含 ? console.log(before1,before1---------------); // hello, how are you doing …

Java使用httpclient发送POST请求

声明&#xff1a;实习时接到一个送餐机器人项目 涉及到httpclient 1.创建请求对象:post或者get HttpPost httpPost new HttpPost(url); 2. 创建httpclient对象 CloseableHttpClient httpclient HttpClientBuilder.create().build(); 3. 创建请求头对象 BasicResponseHa…

初识 Linux线程

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

使用torch.nn.Sequential构建神经网络

torch.nn.Sequential 是 PyTorch 中的一个非常有用的类&#xff0c;它允许用户以一种简单和直观的方式构建神经网络。Sequential 容器可以包含多个神经网络层&#xff0c;这些层会按照它们被添加到 Sequential 中的顺序依次执行。 1.关键特性 以下是 torch.nn.Sequential 的一…

Lenet5硬件加速RTL - 06(nnLinear)

timescale 1ns / 1ps// Description : 全连接层 // Change Logs : 2024.05.10 - Yang.Long - 1.0.0 - module nnLinear #(parameter G_WDEPTH 12 ,//权重深度parameter G_PDEPTH 8 ,//像素深度parameter G_LINEXLEN 160 ,//每行图像宽度pa…

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

“我刚刚本来想在回收站中恢复一个文件的&#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;本人手上也有日常…

Lua 数字格式化

在编程中&#xff0c;对数字进行格式化是一项常见的任务&#xff0c;特别是当我们需要在用户界面中显示数据或生成报告时。在 Lua 中&#xff0c;我们可以使用一些简单而有效的函数来实现数字的格式化。在本文中&#xff0c;我们将介绍一个由几个函数组成的小型 Lua 库&#xf…

【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;通过使用更高质量的训练数据…

JAVA学习-练习试用Java实现电话号码的字母组合

问题: 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits "23" 输…

Java并发编程之锁的艺术:面试与实战指南(四)

Java并发编程之锁的艺术&#xff1a;面试与实战指南&#xff08;四&#xff09; 文章目录 Java并发编程之锁的艺术&#xff1a;面试与实战指南&#xff08;四&#xff09;前言二十七、什么是AQS&#xff08;AbstractQueuedSynchronizer&#xff09;&#xff1f;它在Java并发包中…

Skywalking系列之日志分析语言LAL的配置与解析

提到Skywalking相比并不陌生&#xff0c;或多或少地听到过这个名词&#xff0c;如果你是JAVA开发者&#xff0c;那么可能就更为了解。 作为国内甚至国际上热度比较高、社区比较活跃的APM(Application Performance Monitoring System)系统&#xff0c;它拥有众多的使用者&#…