小程序开发之组件textarea（多行输入框）-- 补

textarea

多行输入框。该组件是原生组件，使用时请注意相关限制。
在这里插入图片描述

Tip：

请注意原生组件使用限制。
微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。
textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。

例如：
效果展示

代码
index.wxml

<!-- 
  value 输入框的内容  
  placeholder  输入框为空时占位符  
  placeholder-style 指定 placeholder 的样式  
  placeholder-class textarea-placeholder  指定 placeholder 的样式类   
  disabled:false  是否禁用  
  maxlength:140   最大输入长度，设置为 -1 的时候不限制最大长度  
  auto-focus:false  自动聚焦，拉起键盘。  
  focus:false   获取焦点  
  auto-height:false   是否自动增高，设置auto-height时，style.height不生效   
  fixed:false   如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true   
  cursor-spacing:0  指定光标与键盘的距离，单位px（2.4.0起支持rpx）。取textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离  
  cursor  指定focus时的光标位置 
  show-confirm-bar:true   是否显示键盘上方带有”完成“按钮那一栏 
  selection-star:-1   光标起始位置，自动聚集时有效，需与selection-end搭配使用 
  selection-end:-1  光标结束位置，自动聚集时有效，需与selection-start搭配使用
  adjust-position:true  键盘弹起时，是否自动上推页面 
  bindfocus   输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度  
  bindblur 输入框失去焦点时触发，event.detail = {value, cursor}  
  bindlinechange  输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}   
  bindinput   当键盘输入时，触发 input 事件，event.detail = {value, cursor}，bindinput 处理函数的返回值并不会反映到 textarea 上   
  bindconfirm   点击完成时， 触发 confirm 事件，event.detail = {value: value}
  aria-label  String    无障碍访问，（属性）元素的额外描述
 -->


<view class="contentView">
  <view class="textarea_title">输入区域高度自适应，不会出现滚动条</view>
  <view class="textarea_bg">
    <textarea bindinput="textareaInput1" maxlength="-1" auto-height />
  </view>
</view>

<view class="contentView">
  <view class="textarea_title">输入区域高度固定，有滚动条</view>
  <view class="textarea_bg">
    <textarea bindinput="textareaInput2" style="height: 4em" maxlength="-1" />
  </view>
</view>

index.wxss

.contentView{
  width: 100%;
  margin-top: 40rpx;
}
.textarea_title{
  margin-left: 20rpx;
  color: gray
}
.textarea_bg{
  padding: 0 25rpx;
  background-color: #fff;
}
textarea{
  width: 700rpx;
  padding: 25rpx 0;
}

index.js

Page({
  data: {
    focus: false
  },
  textareaInput1: function(e) {
    console.log(e.detail.value)
  },
  textareaInput2: function (e) {
    console.log(e.detail.value)
  }
})

小程序开发之组件textarea（多行输入框）-- 补

textarea

猜你喜欢