小程序中模拟发信息输入框,让textarea可以设置最大宽以及根据输入的内容自动变高的方式

embedded/2024/11/23 4:59:47/
<textarea 
show-confirm-bar="{{false}}" 
value="{{item.aValue}}" 
maxlength="301" 
placeholder="请输入" 
auto-height="{{true}}" 
bind:blur="onBlurTextarea" 
focus="{{true}}" 
bindinput="onInput" 
placeholder-style="font-size: 28rpx;color:#acacac;" 
class="comment-box-textarea colorActive" 
adjust-position="{{false}}" 
bindfocus="inputFocus" 
/>

注意:

show-confirm-bar="{{false}}' (这行代码的意思是,当 show-confirm-bar 的值为 false 时,将不会显示软键盘上的完成按钮。通过这种方式,你可以控制是否显示这个额外的空白条和其中的完成按钮。这种方法适用于微信小程序,因为它提供了一个直接的属性来控制这个特定功能的显示与否。如果你不希望显示这个完成按钮,只需将 show-confirm-bar 设置为 false 即可)

adjust-position="{{false}}"(表示禁止键盘弹出时页面的自动滚动‌。当微信小程序中的textarea组件的adjust-position属性设置为false时,键盘弹起时页面不会自动上推,从而避免了页面内容的移动和遮挡问题‌)

focus="{{true}}"(默认进去页面,强行获取焦点)

placeholder="“ (没有输入之前的提示文字)

placeholder-style="font-size: 28rpx;color:#acacac;"(提示文字的样式设置)

maxlength="301"(文字的最多字数限制)

bindinput="onInput"(获取输入的信息事件)

bind:blur="onBlurTextarea"(失去焦点事件)

auto-height="{{true}}"(开启自动高模式)

bindfocus="inputFocus"(获取焦点的事件,这里就是可以获取默认手机键盘的弹起高度设置)

code:

javascript">inputFocus(e) {console.log(e.detail.height,'键盘弹起获取height')if (e.detail.height) {this.setData({inputHeight:e.detail.height})}},


 


http://www.ppmy.cn/embedded/139784.html

相关文章

汽车资讯新高度:Spring Boot技术飞跃

6系统测试 6.1概念和意义 测试的定义&#xff1a;程序测试是为了发现错误而执行程序的过程。测试(Testing)的任务与目的可以描述为&#xff1a; 目的&#xff1a;发现程序的错误&#xff1b; 任务&#xff1a;通过在计算机上执行程序&#xff0c;暴露程序中潜在的错误。 另一个…

reactflow 中 useEdgesState 模块作用

1. 状态管理功能 useEdgesState是一个自定义钩子&#xff08;Hook&#xff09;&#xff0c;主要用于管理边&#xff08;Edges&#xff09;的状态。包括位置、方向、样式等诸多因素。 2. 获取边的状态信息 useEdgesState允许组件获取边的当前状态。这对于需要根据边的状态来进…

el-input绑定点击回车事件意外触发页面刷新

小伙伴们在项目中应该还是比较常用键盘指定按键事件的&#xff0c;尤其是一些筛选条件的通过点击键盘回车按键去触发搜索 例如&#xff1a; <el-form><el-form-item label条件title><el-input v-modelformData.searchKey keydown.entersearch></el-input…

Flutter通过 Coap发送组播

Flutter发送组播的流程 1.初始化 CoAP 客户端 需要初始化 CoAP 客户端并将其连接到组播地址和端口。您可以使用 CoAP 库提供的类来创建和配置客户端 final client CoapClient(Uri.parse(coap://224.0.1.1:5683), // 组播地址和端口 ); 2.创建 CoAP 请求 创建一个 CoAP 请…

box-sizing

title: box-sizing date: 2024-11-20 18:13:42 tags: css 前端搭建项目经典开局——调制box-sizing的相关内容 box-sizing: border-box; 是CSS&#xff08;层叠样式表&#xff09;中的一个属性&#xff0c;用于改变元素的盒模型&#xff08;box model&#xff09;的计算方式。…

每天五分钟深度学习pytorch:批归一化全连接网络完成手写字体识别

本文重点 前面我们学习了普通的全连接神经网络,后面我们学习了带有激活层的全连接神经网络,本文我们继续进一步升级,我们学习带有批归一化的全连接神经网络,批归一化可以加快神经网络的训练速度,减少过拟合,具体它的原理,大家可以看我们的《每天五分钟深度学习》专栏,…

数据跨网传输无忧:FileLink打造内外网文件传输的安全桥梁

在企业数字化办公过程中&#xff0c;内外网文件传输始终是一个绕不开的话题。如何实现高效、便捷、又安全的文件跨网传输&#xff0c;是许多企业在信息化管理中面临的难题。今天&#xff0c;备受企业青睐的文件传输解决方案 FileLink 为您带来一种全新的跨网文件传输体验&#…

推荐文章:FLUI Framework——打造流畅的微软界面体验

推荐文章&#xff1a;FLUI Framework——打造流畅的微软界面体验 FluiFrameworkBringing standardization to Fluent Design by providing easy-to-use styles and controls项目地址:https://gitcode.com/gh_mirrors/fl/FluiFramework 在追求极致用户体验的今天&#xff0c;开…