小程序input输入空格不计数，并且不清除空格显示，限制输入50个字（不算空格）

一、需求情景：

商品评论按字数给积分，最大评论字数50个字（不含空格），输入框右下角有计数器，如下图

二、任务：

• 字数为有效字数，即不包括空格；
• 有效字数达到50个字时不可再输入。

三、难点：

input的maxLength属性计数包括空格在内。如maxlength设置为50，当输入“49个空格+一个字”时，input组件判断为达到最大输入字数不可再输入。即maxLength约束的不是有效字数

• 关键：使input的maxLength属性隐式地变为约束有效字数，有效字数=所有字数-空格数

四、解决方案：

• 有效字数=所有字数-空格数

具体代码实现如下：

//index.js
 //获得文本框输入的内容
  getContent: ({detail: {value}}) => {
    let validContent = value.replace(/\s*/g, '');
    let blankNumber = value.length - validContent.length;
    page.setData({
      validContent,
      maxLength: 50 + blankNumber  //在原来最大字数的基础上加上空格数
    });
  },

//index.wxml
 <view class="inner-box">
       <textarea  placeholder="请输入商品评论" maxlength="{{maxLength}}" bindinput="getContent"></textarea>
       <view> {{validContent.length}}/50</view>
 </view>

实现效果：

附：

这是题外话了

• bug：反斜杠左边的数字未显示。
• 解决方案：validContent变量，提前在data中定义。如下：

data: {
    validContent:'',
    maxLength:50,
  },

由于未定义validContent变量，所以页面初渲染结束的时候validContent并不存在，故页面表现如上图，反斜杠左边没有数字。

• 建议规范：wxml中需要用到的变量，都在data中定义初始值。