微信小程序文本输入＜textarea/＞详解

左手的ㄟ右手 2023-10-07 17:39 51阅读 0赞

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

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

##### 1 基本使用 #####

基本效果就是显示了一个多行的文本输入框。

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

我在这里为明显效果所以设置了个边框样式

.input{
        
      /* 边框 */
      border:1px solid red;
      padding: 10rpx;
    }

##### 2 获取输入框中的内容 #####

bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。

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

对应的 js

/**
       * 输入框实时回调
       * @param {*} options 
       */
      remarkInputAction: function (options) {
        
        //获取输入框输入的内容
        let value = options.detail.value;
        console.log("输入框输入的内容是 " + value)
      },

效果  
![在这里插入图片描述][f07bfb47ea394f33a7e1d43c402a0ed8.gif_pic_center]

##### 3 输入框焦点监听 #####

应用场景还是比较多的，比如输入结束时 去校验个数据什么的

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

对应的 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)
      },

效果图  
![在这里插入图片描述][44e896364e484005a0ca6a5bb1205678.gif_pic_center]

##### 4 auto-height 自动增高与获取行数 #####

*  auto-height 默认为false, 为true时，自动增高，默认显示一行，为true时 style.height设置不生效

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

![在这里插入图片描述][3af62c389b314bb9a24dd8e3bc21e0c0.gif_pic_center]

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

##### 6 使用实例 #####

![在这里插入图片描述][70b0defe262546999146211260f8c44e.gif_pic_center]

<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;
    }

--------------------

完毕

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/af61ae36ae7b4f76808c06db9dd24373.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[f07bfb47ea394f33a7e1d43c402a0ed8.gif_pic_center]: https://img-blog.csdnimg.cn/f07bfb47ea394f33a7e1d43c402a0ed8.gif#pic_center
[44e896364e484005a0ca6a5bb1205678.gif_pic_center]: https://img-blog.csdnimg.cn/44e896364e484005a0ca6a5bb1205678.gif#pic_center
[3af62c389b314bb9a24dd8e3bc21e0c0.gif_pic_center]: https://img-blog.csdnimg.cn/3af62c389b314bb9a24dd8e3bc21e0c0.gif#pic_center
[70b0defe262546999146211260f8c44e.gif_pic_center]: https://img-blog.csdnimg.cn/70b0defe262546999146211260f8c44e.gif#pic_center