小程序中模拟发信息输入框,让textarea可以设置最大宽以及根据输入的内容自动变高的方式
<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:
inputFocus(e) {
console.log(e.detail.height,'键盘弹起获取height')
if (e.detail.height) {
this.setData({
inputHeight:e.detail.height
})
}
},