小程序中模拟发信息输入框,让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
      })
    }
  },
相关推荐
今天又在摸鱼4 分钟前
Maven
java·maven
老马啸西风7 分钟前
maven 发布到中央仓库常用脚本-02
java·maven
代码的余温7 分钟前
MyBatis集成Logback日志全攻略
java·tomcat·mybatis·logback
中微子9 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina13 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
一只叫煤球的猫2 小时前
【🤣离谱整活】我写了一篇程序员掉进 Java 异世界的短篇小说
java·后端·程序员
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js