组件说明:
textarea 多行输入框。
效果展示:
属性效果图：
代码：
wxml
-
<view class="content">
-
placeholder：
-
<textarea placeholder="占位符" />
-
<textarea placeholder="占位符 改变样式style" placeholder-style=
-
"color:blue"/>
-
<textarea placeholder="占位符 改变样式class" placeholder-class="placeholdText"/>
-
</view>
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;
-
}
事件效果图：
wxml:
-
<view class="content">
-
auto-height：
-
<textarea auto-height placeholder="自动增高，style.height不生效"/>
-
bindinput="当内容改变"
-
<textarea placeholder="" bindlinechange="bindlinechange"/>
-
bindfocus:当获取焦点
-
<textarea placeholder="当获取焦点" value="" bindfocus="bindfocus"/>
-
bindblur：当失去焦点触发
-
<textarea placeholder="当失去焦点" bindblur="bindblur"/>
-
</view>
-
事件触发：
-
<view class="content" style="color:blue">
-
{{log}}
-
</view>
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;
-
}
组件属性：
|
属性
|
描述
|
类型
|
默认值
|
|
value |
初始内容 |
String |
|
|
placeholder |
占位符 |
String |
|
|
placeholder-style |
指定 placeholder 的样式 |
String |
|
|
placeholder-class |
指定 placeholder 的样式类 |
String |
textarea-placeholder |
|
disabled |
是否禁用 |
Boolean |
false |
|
maxlength |
最大输入长度，设置为 0 的时候不限制最大长度 |
Number |
140 |
|
auto-focus |
自动聚焦，拉起键盘。页面中只能有一个 input 或 textarea标签时， 设置 auto-focus 属性 |
Boolean |
false |
|
focus |
获取焦点（当前开发工具暂不支持） |
Boolean |
false |
|
auto-height |
是否自动增高，设置auto-height时，style.height不生效 |
Boolean |
false |
|
bindfocus |
输入框聚焦时触发event.detail = {value: value} |
EventHandle |
|
|
bindblur |
输入框失去焦点时触发event.detail = {value: value} |
EventHandle |
|
|
bindlinechange |
输入框行数变化时调用event.detail = {height: 0, heightRpx: 0, lineCount: 0} |
EventHandle |
|
属性解析：
wxml
-
<!--=======属性=======-->
-
<!--value：输入框内容-->
-
<textarea value="内容"/>
-
<!--placeholder：占位符，对输入框内容提示-->
-
<textarea placeholder="占位符" placeholder-class="占位符静态样式" placeholder-style="占位符动态样式"/>
-
<!--disabled：控制标签有效,或者失效状态，在失效状态，不能获取该值-->
-
<textarea disabled="true"/>
-
<textarea disabled/> 等同于 <textarea disabled="false"/>
-
<!--maxlength:内容长度限制,默认140-->
-
<textarea maxlength="100"/>
-
<textarea maxlength/> 等同于 <textarea maxlength="140"/>
-
<!--focus:初始化时，获取输入焦点(目前开发工具暂不支持)-->
-
<textarea focus="true"/>
-
<textarea focus/> 等同于 <textarea focus="false"/>
-
<!--auto-focus：当界面只有一个textarea,自动获取焦点-->
-
<textarea auto-focus="true"/>
-
<textarea auto-focus/> 等同于 <textarea auto-focus="false"/>
-
<!--auto-height：是否自动增高，设置auto-height时，style.height不生效-->
-
<textarea auto-height="true"/>
-
<textarea auto-height/> 等同于 <textarea auto-height="false"/>
-
<!--=======事件=======-->
-
<!--bindlinechange:输入框行数变化时调用 返回参数：height,heightRpx,lineCount-->
-
<textarea bindlinechange="自己定义函数名"/>
-
<!--bindfocus:当获取焦点，可用输入状态时触发-->
-
<textarea bindfocus="自己定义函数名"/>
-
<!--bindblur：当失去焦点触发-->
-
<textarea bindblur="自己定义函数名"/>
|
