小程序实践（十）：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
    });
  },

 

 

 

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

 

小程序实践（一）：主页tab选项实现

小程序实践（二）：swiper组件实现轮播图效果

小程序实践（三）：九宫格实现及item跳转

小程序实践（四）：动态控制组件的显示/隐藏

小程序实践（五）：for循环绑定item的点击事件

小程序实践（六）：view内部组件排版

小程序实践（七）：页面间传值

小程序实践（八）：验证码倒计时功能

小程序实践（九）：返回到上一个界面并传值回去

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

小程序实践（十一）：showModal的使用

小程序实践（十二）：七牛云上传图片