小程序中模拟发信息输入框,让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
      })
    }
  },
相关推荐
柳鲲鹏28 分钟前
Could not find artifact com.microsoft.sqlserver:sqljdbc4:jar:4.0 in central
java·jar
烁3471 小时前
每日一题(小白)模拟娱乐篇13
java·算法·娱乐·暴力
2301_793069821 小时前
前后端分离下,Spring Boot 请求从发起到响应的完整执行流程
java·spring boot·mvc
好_快1 小时前
Lodash源码阅读-baseMatchesProperty
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-hasPath
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-hasIn
前端·javascript·源码阅读
Jasmin Tin Wei2 小时前
蓝桥杯 web 展开你的扇子(css3)
前端·css·css3
烁3472 小时前
每日一题(小白)模拟娱乐篇14
java·开发语言·算法·娱乐·暴力
好_快2 小时前
Lodash源码阅读-basePropertyDeep
前端·javascript·源码阅读
xiaolingting3 小时前
Java 二叉树非递归遍历核心实现
java··二叉树非递归遍历