微信小程序----组件之textarea
程序员文章站
2024-02-11 16:40:46
...
效果图:
项目结构:
核心代码:
index.wxml
<!--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>
index.js
//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)
}
})
源码下载:http://download.csdn.net/download/zhaihaohao1/9968483