微信小程序文本输入＜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 点击键盘的回车键或者是完成按钮时回调的事件
</li></ul> <p>对应的 js</p> <pre><code>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) }, </code></pre><p>效果图<br><img src="https://img-blog.csdnimg.cn/44e896364e484005a0ca6a5bb1205678.gif#pic_center" alt="在这里插入图片描述"></p> <h5 id="h5-4-auto-height-"><a name="4 auto-height 自动增高与获取行数" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4 auto-height 自动增高与获取行数</h5><ul> <li><p>auto-height 默认为false, 为true时，自动增高，默认显示一行，为true时 style.height设置不生效</p> <textarea auto-height="true" bindlinechange="remarkLineAction" /> <p>remarkLineAction: function (options) {</p> <pre><code>//行数 let lineCount = options.detail.lineCount; let height = options.detail.height; let heightRpx = options.detail.heightRpx; console.log("输入框行数变化 " + lineCount) </code></pre><p> },</p> </li></ul> <p><img src="https://img-blog.csdnimg.cn/3af62c389b314bb9a24dd8e3bc21e0c0.gif#pic_center" alt="在这里插入图片描述"></p> <h5 id="h5-5-maxlength-140-1-"><a name="5 maxlength 限制输入的文本长度，默认是 140字符，配置为 -1 时代表无限制" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5 maxlength 限制输入的文本长度，默认是 140字符，配置为 -1 时代表无限制</h5><pre><code><textarea maxlength="1" /> </code></pre><h5 id="h5-6-"><a name="6 使用实例" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6 使用实例</h5><p><img src="https://img-blog.csdnimg.cn/70b0defe262546999146211260f8c44e.gif#pic_center" alt="在这里插入图片描述"></p> <pre><code><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; } </code></pre><hr> <p>完毕</p>