小程序实践（十）：textarea实现简单的编辑文本界面

wxml

 <view class='textarea-Style'>
   <textarea placeholder='请输入文字' value='{{contentStr}}' bindinput="getWords" maxlength='{{maxTextLen}}'></textarea>
   <view class='contentNumStyle'>{{textLen}}/{{maxTextLen}}</view>
 </view>

wxss 

.contentNumStyle {
  display: flex;
  justify-content: flex-end;
  padding: 2%;
  font-size: 14px;
  color: #c0c6d3;
}

.textarea-Style {
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  color: #33496d;
  width: 100%;
}

js

/**
   * 页面的初始数据
   */
  data: {
    // 最大字符数
    maxTextLen: 20,
    // 当前文本长度
    textLen: 0,
    // 文本内容
    contentStr: "",
  },
  getWords(e) {
    let page = this;
    // 设置最大字符串长度(为-1时,则不限制)
    let maxTextLen = page.data.maxTextLen;
    // 文本长度
    let textLen = e.detail.value.length;

    page.setData({
      maxTextLen: maxTextLen,
      textLen: textLen,
      contentStr: e.detail.value
    });
  },