多行输入框php,微信小程序组件：textarea多行输入框解读和分析

textarea多行输入框组件说明:

textarea 多行输入框。

textarea多行输入框示例代码运行效果如下：

下面是WXML代码：

placeholder：

"color:blue"/>

下面是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代码：

等同于

等同于

等同于

等同于

等同于