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

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