以下将展示微信小程序之表单组件textarea源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
功能描述:
多行输入框。该组件是原生组件,使用时请注意相关限制。。
属性说明:
WebView
Skyline
Bug& Tip
1.tip:textarea 的blur 事件会晚于页面上的 tap 事件,如果需要在button 的点击事件获取 textarea,可以使用form 的 bindsubmit。
2.tip:不建议在多行文本上对用户的输入进行修改,所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
3.tip: 键盘高度发生变化,keyboardheightchange事件可能会多次触发,开发者对于相同的 height 值应该忽略掉
4.bug:微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。
示例代码
JAVASCRIPT:
//textarea.js
Page({
data: {
height: 20,
focus: false
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
},
bindFormSubmit: function(e) {
console.log(e.detail.value.textarea)
}
})
WXML:
<view class="section">
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
<textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;" />
</view>
<view class="section">
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
<textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<view class="btn-area">
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>
<view class="section">
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form 中的 textarea" name="textarea"/>
<button form-type="submit"> 提交 </button>
</form>
</view>
版权声明:本站所有内容均由互联网收集整理、上传,如涉及版权问题,请联系我们第一时间处理。
原文链接地址:https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html