textarea 属性(textarea标签的属性)

在微信小程序的开发中，使用input实现文本输入，是单行的，textarea是多行输入。

1 基本使用

& lttextarea class = & # 34输入& # 34；name = & # 34备注& # 34；placeholder = & # 34请输入评论& # 34；自动对焦= & # 34；真& # 34；/& gt；基本效果是显示一个多行文本输入框。

placeholder 输入框为空时的占位符auto-focus 自动聚集，拉起键盘，需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性

我在这里设置了一个边框样式，效果很明显。

。input{ /* border */ border:1px纯红；填充:10rpx}2获取输入框中的内容bindinput属性用于绑定键盘输入时的事件监控，即可以实时获取输入中的内容。

当然，您可以在您的处理函数中直接返回一个结果来替换输入框中的内容。

& lttextarea class = & # 34输入& # 34；name = & # 34备注& # 34；placeholder = & # 34请输入评论& # 34；bindinput = & # 34注释计算& # 34；/& gt；相应的js

/* * *输入框实时回调* @ param { * } options */RemarkinputAction:function(options){//获取输入框内容let value = options . detail . value；console . log(& # 34；输入框的内容是& # 34；+value)}，效果

3 输入框焦点监听

有很多应用场景，比如输入结束检查数据。

bindfocus 输入框获取到输入焦点时bindblur 输入框焦点移出bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件

& lttextarea class = & # 34输入& # 34；name = & # 34备注& # 34；placeholder = & # 34请输入评论& # 34；bindfocus = & # 34remarkFocusAction & # 34bindblur = & # 34remarkbluranction & # 34；bindconfirm = & # 34备注确认& # 34；/& gt；相应的js

RemarkFocusAction:function(options){//输入框焦点获取let value = options . detail . value；console . log(& # 34；获得输入框的焦点& # 34；+value)}，remark blur:function(options){//输入框焦点移出let value = options . detail . value；console . log(& # 34；输入框的焦点移出& # 34；+value)}，备注确认:function(options){//点击键盘上的完成按钮let value = options . detail . value；console . log(& # 34；单击键盘上的“完成”按钮& # 34；+value)}，效果图

4 auto-height 自动增高与获取行数auto-height 默认为false, 为true时，自动增高，默认显示一行，为true时 style.height设置不生效bindlinechange 换行时会触发

& lttextarea自动高度= & # 34；真& # 34；bindlinechange = & # 34备注反应& # 34；/& gt；

remarkLineAction: function (options) { //行数 let lineCount = options.detail.lineCount; let height = options.detail.height; let heightRpx = options.detail.heightRpx; console.log("输入框行数变化 " + lineCount) },

remark line action:function(options){//行数let line count = options . detail . line count；let height = options . detail . height；let height rpx = options . detail . height rpx；console . log(& # 34；输入行数改变& # 34；+ lineCount) }，

5 maxlength 限制输入的文本长度，默认是 140字符，配置为 -1 时代表无限制

<textarea maxlength="1" />6 使用实例

& lttextarea maxlength = & # 341"/& gt；6使用示例

& ltview class = & # 34输入显示& # 34；& gt& lttextarea maxlength = & # 39500'placeholder-style = & # 34；颜色:# 5 F5 f5f；"bindinput = & # 39limitWord & # 39value = & # 34{ { content } } & # 34placeholder = & # 39请输入评论(最多500字)& # 39；& gt& lt/textarea & gt；& ltview class = & # 34clear & # 34& gt& lt文本样式= & # 34；浮动:右& # 34；& gt{{currentWord}}/{{maxWord}}(最多可以输入500个单词)</text & gt；& lt/view & gt；& lt/view & gt；

Page({ /** *页面的初始数据*/ data: {// word limit maxword: 500，currentword: 0}，limit word:function(e){ var that = this；var值= e . detail . value；//将字符串长度解析为整数。var word length = parse int(value . length)；if(that . data . max word & lt；word length){ return；} that . setdata({ current word:word length })；},);

。inputshow { padding:10px；背景色:白色；边框:1px纯红；填充:10rpx}结束