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

we_前端全家桶2024-11-19 22:54

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
      })
    }
  },