以下将展示微信小程序之表单组件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> |
|
来自: MLC061 > 《微信小程序官方组件展示》