Javascript----input事件實現動態監聽textarea內容變化
阿新 • • 發佈:2017-08-08
span oninput idt ava ntb ima property onchange pre
1、代碼
<!DOCTYPE html> <html> <head> <title>textarea輸入文字監聽</title> </head> <body> <textarea id=‘text‘ maxlength="50" style="width: 400px; height: 200px;"></textarea> <span id=‘sp‘></span> <script type="text/javascript"> var val = document.getElementById("text"); var tar = document.getElementById(‘sp‘); console.log(tar); val.addEventListener("input", function(e) { var t = this.value; console.log(t); if (t.length > 10) { e.returnValue = false; } tar.innerText = (50 - t.length); }) </script> </body> </html>
2、效果
3、總結:比較textarea的幾個事件,
a、onChange :鼠標市區焦點的時候觸發
b、onInput : textarea內容改變的時候出發
c、通過監聽鍵盤事件也是存在很多bug的,keyup存在當復制粘貼刪除的時候
d、onpropertychange事件ie兼容性不好,can i you都沒發找到兼容性信息,
Javascript----input事件實現動態監聽textarea內容變化