这篇文章给大家分享的是有关 微信小程序组件textarea多行输入框的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联-专业网站定制、快速模板网站建设、高性价比双城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式双城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖双城地区。费用合理售后完善，十多年实体公司更值得信赖。
textarea多行输入框组件说明:
textarea 多行输入框。
textarea多行输入框示例代码运行效果如下：
下面是WXML代码：
placeholder：
下面是WXSS代码：
.content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 10px;
}
textarea{
border: 1px red solid;
margin: auto;
width:100%;
height: 3em;
margin-top:5px;
padding: 3px;
}
/*占位符样式*/
.placeholdText{
font-size: 2em;
}textarea多行输入框的事件效果图：
下面是WXML代码：:
auto-height：
bindinput="当内容改变"
bindfocus:当获取焦点
bindblur：当失去焦点触发
事件触发：
{{log}}
下面是JS代码：:
Page({
data:{
log:'事件触发'
},
//行高改变时
bindlinechange:function(e){
var height=e.detail.height;
var heightRpx=e.detail.heightRpx;
var lineCount=e.detail.lineCount;
this.setData({
log:"height="+height+" | heightRpx="+heightRpx+" | lineCount="+lineCount
})
},
//文本失去焦点
bindblur:function(e){
var value=e.detail.value;
this.setData({
log:"bindblur失去改变.获取textarea值="+value
})
},
//文本获取焦点
bindfocus:function(e){
var value=e.detail.value;
this.setData({
log:"bindfocus获取焦点,获取textarea值="+value
})
}
})下面是WXSS代码：:
.content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 10px;
}
textarea{
border: 1px red solid;
margin: auto;
width:100%;
height: 3em;
margin-top:5px;
padding: 3px;
}
属性解析：
下面是WXML代码：
等同于
等同于
等同于
等同于
等同于
感谢各位的阅读！关于“ 微信小程序组件textarea多行输入框的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
名称栏目：微信小程序组件textarea多行输入框的示例分析
文章路径：
http://cdxtjz.cn/article/jsgojd.html
