javascript開發中使用onpropertychange,oninput事件解決onchange事件的不足

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> javascript開發中使用onpropertychange,oninput事件解決onchange事件的不足

編輯：JQuery特效代碼

onchange在用於文本框輸入框時,有一個明顯的不足. 事件不會隨著文字的輸入而觸發,而是等到文本框失去焦點(onblur)時才會觸發. 也就是沒有即時性!

在IE下,可以用onpropertychange來代替onchange事件,當文本框有任何變化時,能立即觸發此事件.

這樣一來問題就解決了.

那其他浏覽器呢,onpropertychange可是IE的專利. 接下來就是oninput事件了.

但是oninput有個詭異,必須用addEventListener的方式來綁定事件.否則無效.

好了, 以下是演示例子, 主流浏覽器都沒問題:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>on用onpropertychange,oninput事件解決onchange事件的不足 by koyoz.com</title> <style type="text/css"> *{font-size:14px;font-family:'Comic Sans MS', Verdana} body {margin-left:20px} </style> </head> <body> <p>使用onchange事件: </p> <input type="text" id="txt1" /> <p>使用onpropertychange/oninput事件: </p> <input type="text" id="txt2" /> <p>結果:</p> <input type="text" id="txt" /> <script type="text/javascript"> var $ = function(o) { return document.getElementById(o) }; $('txt1').onchange = function() { $('txt').value = this.value; } $('txt2').onpropertychange = function() { $('txt').value = this.value; } if (window.addEventListener) { $('txt2').addEventListener('input', function() {$('txt').value = this.value}, false); } </script> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:在次封裝easyui-Dialog插件實現代碼
下一頁:基於Jquery的回車成tab焦點切換效果代碼(Enter To Tab )

JQuery特效代碼

基於jQuery的前端數據通用驗證庫: 於是在之前的開發之中慢慢開始總結，也寫了一些零散的方法想要比較簡單的，寫更少的代碼來完成更多的驗證。
基於jquery實現的圖片在各種分辨率下未知的容器內上下左右居中: DIV：. 代碼如下:<div class=pic_conent><div cla
jquery中對於批量deferred的處理方法: 此代碼仿照jquery源碼中$.when()的實現. 代碼如下:function test(i) {

DIV CSS 佈局教程網

相關文章