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

html 复制代码
<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
      })
    }
  },
相关推荐
Tans525 分钟前
[小笔记] Java 集合类
java
reembarkation29 分钟前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu44 分钟前
F2C-PTD工具将需求快速转换为代码实践
前端
月阳羊1 小时前
【硬件-笔试面试题-95】硬件/电子工程师,笔试面试题(知识点:RC电路中的时间常数)
java·经验分享·单片机·嵌入式硬件·面试
Bigemap1 小时前
BigemapPro快速添加历史影像(Arcgis卫星地图历史地图)
java·开发语言
给月亮点灯|1 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
IT学长编程1 小时前
计算机毕业设计 基于Hadoop的健康饮食推荐系统的设计与实现 Java 大数据毕业设计 Hadoop毕业设计选题【附源码+文档报告+安装调试】
java·大数据·hadoop·毕业设计·课程设计·推荐算法·毕业论文
~废弃回忆 �༄1 小时前
mobx-miniprogram小程序的数据传输
小程序
芜青1 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥1 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播