js監聽textarea 內容的變化，並計算內容的長度c

 

html代碼如下：

 

1.  
   <div class="customer-message">
2.  
   <label for="customerMessage">留言</label>
3.  
   <textarea id="customerMessage" maxlength="500o"></textarea>
4.  
   <p class="text-count"><span id="textCount">0</span>/500（留言多余10個字）</p>
5.  
   </div>

js代碼如下：

 

1.  
   window.onload = function () {
2.  
   //獲取文本內容和長度函數
3.  
   function txtCount(el) {
4.  
   var val = el.value;
5.  
   var eLen = val.length;
6.  
   return eLen;
7.  
   }
8.  
    
9.  
   var el = document.getElementById('customerMessage');
10.  
    el.addEventListener( 'input',function () {
11.  
    var len = txtCount(this); // 調用函數
12.  
    document.getElementById('textCount').innerHTML = len;
13.  
    });
14.  
     
15.  
    el.addEventListener( 'propertychange',function () {//兼容IE
16.  
    var len = txtCount(this); // 調用函數
17.  
    document.getElementById('textCount').innerHTML = len;
18.  
    });
19.  
    }

記錄如上