小程序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中定義初始值。