|
Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。 oninput 事件在用戶輸入、退格（backspace）、刪除（delete）、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標(biāo)剪切與粘貼時(shí)觸發(fā)（在 IE9 中只在輸入、粘貼、鼠標(biāo)粘貼時(shí)觸發(fā)）。 onpropertychange 事件在用戶輸入、退格（backspace）、刪除（delete）、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標(biāo)剪切與粘貼時(shí)觸發(fā)（在 IE9 中只在輸入、粘貼、鼠標(biāo)粘貼時(shí)觸發(fā)）（僅 IE 支持）。 backspace、delete 兩個(gè)按鍵的 keyCode 分別為 8、46。 oncut 事件在粘貼（ctrl + v）、鼠標(biāo)粘貼時(shí)觸發(fā)。  var input = document.getElementById("test"); function fn() { console.log(input.value.length) // 你要執(zhí)行的代碼 } if (window.addEventListener) { //先執(zhí)行W3C input.addEventListener("input", fn, false); } else { input.attachEvent("onpropertychange", fn); } if (window.VBArray && window.addEventListener) { //IE9 input.attachEvent("onkeydown", function() { var key = window.event.keyCode; (key == 8 || key == 46) && fn(); //處理回退與刪除 }); input.attachEvent("oncut", fn); //處理粘貼 } 在上面的代碼中，可以看到，在JS中有oninput這樣的事件，文本框的輸入、退格、空格、粘貼等操作均能觸發(fā)，利用這個(gè)事件就可以動(dòng)態(tài)捕捉用戶的輸入情況。記得以前做動(dòng)態(tài)監(jiān)測(cè)輸入，都是用onkeydown或onkeyup，太土了，現(xiàn)在直接用這個(gè)吧。當(dāng)代IE的兼容問題已經(jīng)在上面的代碼中解決了，那么我們之接就可以拿來(lái)使用了； 利用oninput事件，我們可以開發(fā)一款限制textarea字?jǐn)?shù)的插件，像新浪微薄發(fā)表微薄的時(shí)候，就有字?jǐn)?shù)的限制； 開發(fā)這個(gè)插件其實(shí)相當(dāng)簡(jiǎn)單，就是對(duì)輸入的字?jǐn)?shù)進(jìn)行一下統(tǒng)計(jì)，如果超出了就進(jìn)行提示，直接看代碼： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery插件——仿新浪微博限制輸入字?jǐn)?shù)的textarea</title> <script src="http://apps./libs/jquery/1.10.1/jquery.min.js"></script> <style> *{padding: 0;margin: 0;} .box{width: 800px;margin: 0 auto;} #test{border:1px solid #d9d9d9; padding:0 1%;line-height: 1.8;font-family: "microsoft yahei";font-size: 14px;display: block; width: 98%; height: 80px;;} #info{padding: 3px 0;font-family: "microsoft yahei";font-size: 14px;} </style> </head> <body> <div class="box"> <textarea id="test" width="100%"></textarea> </div> <script> (function($) { $.fn.limitTextarea = function(opts) { var defaults = { maxNumber: 140, //允許輸入的最大字?jǐn)?shù) position: 'top', //提示文字的位置，top：文本框上方，bottom：文本框下方 onOk: function() {}, //輸入后，字?jǐn)?shù)未超出時(shí)調(diào)用的函數(shù) onOver: function() {} //輸入后，字?jǐn)?shù)超出時(shí)調(diào)用的函數(shù) } var option = $.extend(defaults, opts); this.each(function() { var _this = $(this); var info = '<div id="info">還可以輸入<b>' + (option.maxNumber - _this.val().length) + '</b>字</div>'; var fn = function() { var $info = $('#info'); var extraNumber = option.maxNumber - _this.val().length; if (extraNumber >= 0) { $info.html('還可以輸入<b>' + extraNumber + '</b>個(gè)字'); option.onOk(); } else { $info.html('已經(jīng)超出<b style="color:red;">' + (-extraNumber) + '</b>個(gè)字'); option.onOver(); } }; switch (option.position) { case 'top': _this.before(info); break; case 'bottom': default: _this.after(info); } //綁定輸入事件監(jiān)聽器 if (window.addEventListener) { //先執(zhí)行W3C _this.get(0).addEventListener("input", fn, false); } else { _this.get(0).attachEvent("onpropertychange", fn); } if (window.VBArray && window.addEventListener) { //IE9 _this.get(0).attachEvent("onkeydown", function() { var key = window.event.keyCode; (key == 8 || key == 46) && fn(); //處理回退與刪除 }); _this.get(0).attachEvent("oncut", fn); //處理粘貼 } }); } })(jQuery) //插件調(diào)用； $(function() { $('#test').limitTextarea({ maxNumber: 140, //最大字?jǐn)?shù) position: 'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方 onOk: function() { $('#test').css('background-color', 'white'); }, //輸入后，字?jǐn)?shù)未超出時(shí)調(diào)用的函數(shù) onOver: function() { $('#test').css('background-color', 'lightpink'); } //輸入后，字?jǐn)?shù)超出時(shí)調(diào)用的函數(shù)，這里把文本區(qū)域的背景變?yōu)榉奂t色 }); }); </script> </body> </html> 使用非常簡(jiǎn)單，在你要進(jìn)行限制的textarea上直接調(diào)用limitTextarea()方法即可。上面代碼中的limitTextarea.js也可以單獨(dú)存為一個(gè)JS文件，頁(yè)面中引入即可； demo地址：http:///jonechen/pen/RrXqpa； |
|
|
