監聽textarea 內容變化：HTML5標準事件 oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化

html程式碼如下：

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

js程式碼如下：

 window.onload = function () {
       //獲取文字內容和長度函式
        function txtCount(el) {
            var val = el.value;
            var eLen = val.length;
            return eLen;
        }
       
        var el = document.getElementById('customerMessage');
        el.addEventListener('input',function () {
            var len =  txtCount(this); //   呼叫函式 
            document.getElementById('textCount').innerHTML = len;
        });
        
        el.addEventListener('propertychange',function () {//相容IE
            var len =  txtCount(this); //   呼叫函式 
            document.getElementById('textCount').innerHTML = len;
        });
    }
 

記錄如上