小程序實踐（十）：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的使用

小程序實踐（十二）：七牛雲上傳圖片