篇首语:本文由小编为大家整理,主要介绍了微信小程序怎样设置textarea文本域输入?相关的知识,希望对你有一定的参考价值。
参考技术A解决微信小程序怎样设置textarea文本域输入的步骤如下:
1.第一步,打开微信小程序开发工具,在指定的wxml文件中插入一个textarea组件,设置最大长度、失去焦点事件等。
2.第二步,在界面对应的javascript文件,添加失去焦点事件,并获取文本域文字内容。
3.第三步,接着保存代码并在模拟器中预览界面显示效果,可以看到一个文本域。
4.第四步,在文本域组件中输入相应的文字内容,尽可能输入多的内容。
5.第五步,接着在浏览器的控制台下方,查看打印的结果值,跟文本域中的一致。
6.第六步,最后再输入其他的文字内容,由于限制了文本域的最大输入长度,边输入边查看结果。这样就解决了微信小程序怎样设置textarea文本域输入的问题了。
微信小程序文本输入<textarea/> 详解
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。
在微信小程序开发中,input 用来实现文本输入,是单行的,textarea是多行的输入实现
1 基本使用
<textarea class="input" name="remark" placeholder="请输入备注" auto-focus="true" />
基本效果就是显示了一个多行的文本输入框。
- placeholder 输入框为空时的占位符
- auto-focus 自动聚集,拉起键盘,需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性
我在这里为明显效果所以设置了个边框样式
.input /* 边框 */ border:1px solid red; padding: 10rpx;
2 获取输入框中的内容
bindinput 属性用来绑定键盘输入时的事件监听,也就是可以实时获取输入中的内容 。
当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。
<textarea class="input" name="remark" placeholder="请输入备注" bindinput="remarkInputAction" />
对应的 js
/** * 输入框实时回调 * @param * options */ remarkInputAction: function (options) //获取输入框输入的内容 let value = options.detail.value; console.log("输入框输入的内容是 " + value) ,
效果
3 输入框焦点监听
应用场景还是比较多的,比如输入结束时 去校验个数据什么的
- bindfocus 输入框获取到输入焦点时
- bindblur 输入框焦点移出
- bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件
<textarea class="input" name="remark" placeholder="请输入备注" bindfocus="remarkFocusAction" bindblur="remarkBlurAction" bindconfirm="remarkConfirm" />
对应的 js
remarkFocusAction: function (options) //输入框焦点获取 let value = options.detail.value; console.log("输入框焦点获取 " + value) , remarkBlurAction: function (options) //输入框焦点移出 let value = options.detail.value; console.log("输入框焦点移出 " + value) , remarkConfirm: function (options) //点击了键盘上的完成按钮 let value = options.detail.value; console.log("点击了键盘上的完成按钮 " + value) ,
效果图
4 auto-height 自动增高与获取行数
- auto-height 默认为false, 为true时,自动增高,默认显示一行,为true时 style.height设置不生效
<textarea auto-height="true" bindlinechange="remarkLineAction" />
remarkLineAction: function (options) //行数 let lineCount = options.detail.lineCount; let height = options.detail.height; let heightRpx = options.detail.heightRpx; console.log("输入框行数变化 " + lineCount) ,
5 maxlength 限制输入的文本长度,默认是 140字符,配置为 -1 时代表无限制
<textarea maxlength="1" />
6 使用实例
<view class="inputshow"> <textarea maxlength="500" placeholder-style="color:#5F5F5F;" bindinput="limitWord" value="content" placeholder="请输入备注(最多500个字)">textarea> <view class="clear"> <text style="float: right">currentWord/maxWord(最多可输入500字)text> view> view>
Page( /** * 页面的初始数据 */ data: //字数限制 maxWord: 500, currentWord: 0 , limitWord:function(e) var that = this; var value = e.detail.value; //解析字符串长度转换成整数。 var wordLength = parseInt(value.length); if (that.data.maxWord < wordLength) return ; that.setData( currentWord: wordLength ); ,);
.inputshow padding: 10px; background-color: white; border:1px solid red; padding: 10rpx;
完毕
以上是关于微信小程序怎样设置textarea文本域输入?的主要内容,如果未能解决你的问题,请参考以下文章