在微信小程序开发中，input用来实现文本输入，是单行的，textarea是多行的输入实现
1基本使用<textareaclass=”input”name=”remark”placeholder=”请输入备注”auto-focus=”true”/>
基本效果就是显示了一个多行的文本输入框。
placeholder输入框为空时的占位符auto-focus自动聚集，拉起键盘，需要注意的是一个页面中只能有一个input标签或者textarea来设置这个属性我在这里为明显效果所以设置了个边框样式
.input{
/*边框*/
border:1pxsolidred;
padding:10rpx;
}
bindinput属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容。
当然在你的处理函数中可以直接return一个结果来替换输入框中的内容。
<textareaclass=”input”name=”remark”placeholder=”请输入备注”bindinput=”remarkinputaction”/>
对应的js
/**
*输入框实时回调
*@param{*}options
*/
remarkinputaction:function(options){
//获取输入框输入的内容
letvalue=options.detail.value;
console.log(“输入框输入的内容是”+value)
},
效果
3输入框焦点监听应用场景还是比较多的，比如输入结束时去校验个数据什么的
bindfocus输入框获取到输入焦点时bindblur输入框焦点移出bindconfirm点击键盘的回车键或者是完成按钮时回调的事件<textareaclass=”input”name=”remark”placeholder=”请输入备注”
bindfocus=”remarkfocusaction”
bindblur=”remarkbluraction”
bindconfirm=”remarkconfirm”/>
对应的js
remarkfocusaction:function(options){
//输入框焦点获取
letvalue=options.detail.value;
console.log(“输入框焦点获取”+value)
},
remarkbluraction:function(options){
//输入框焦点移出
letvalue=options.detail.value;
console.log(“输入框焦点移出”+value)
},
remarkconfirm:function(options){
//点击了键盘上的完成按钮
letvalue=options.detail.value;
console.log(“点击了键盘上的完成按钮”+value)
},
效果图
4auto-height自动增高与获取行数auto-height默认为false,为true时，自动增高，默认显示一行，为true时style.height设置不生效bindlinechange换行时会触发<textareaauto-height=”true”bindlinechange=”remarklineaction”/>
remarklineaction:function(options){
//行数
letlinecount=options.detail.linecount;
letheight=options.detail.height;
letheightrpx=options.detail.heightrpx;
console.log(“输入框行数变化”+linecount)
},
<textareamaxlength=”1″/>
6使用实例<viewclass=”inputshow”>
<textareamaxlength=’500′placeholder-style=”color:#5f5f5f;”bindinput=’limitword’value=”{{content}}”placeholder=’请输入备注（最多500个字）’></textarea>
<viewclass=”clear”>
<textstyle=”float:right”>{{currentword}}/{{maxword}}(最多可输入500字)</text>
</view>
</view>
page({
/**
*页面的初始数据
*/
data:{
//字数限制
maxword:500,
currentword:0
},
limitword:function(e){
varthat=this;
varvalue=e.detail.value;
//解析字符串长度转换成整数。
varwordlength=parseint(value.length);
if(that.data.maxword<wordlength){
return;
}
that.setdata({
currentword:wordlength
});
},
);
.inputshow{
padding:10px;
background-color:white;
border:1pxsolidred;
padding:10rpx;
}
