小程序开发之组件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)
}
})