|
今天同事測(cè)試發(fā)現(xiàn)項(xiàng)目中一個(gè)小bug,，然后我負(fù)責(zé)解決,。研究了不短的時(shí)間,，終于搞定了,，有點(diǎn)激動(dòng),。呵呵。拿出來與大家分享,。
想要實(shí)現(xiàn)的功能大概是這樣的： 有兩個(gè)文本框,，其中一個(gè)只讀，另一個(gè)可以輸入,。要求在可輸入文本框中輸入文本時(shí),，只讀文本框能夠獲得輸入的值，且只讀文本框旁邊出現(xiàn)提示信息,，實(shí)時(shí)顯示只讀文本框的內(nèi)容,。 這個(gè)功能看是簡(jiǎn)單，但其實(shí)并沒有想象的那么簡(jiǎn)單,。（注意,，可輸入框的處理沒什么可討論的，關(guān)鍵是只讀框的處理） 一開始,，我們一般會(huì)想到在只讀文本框上運(yùn)用onchange事件,。一試,，發(fā)現(xiàn)onchange根本沒用，該事件是在文本框獲得焦點(diǎn),，然后內(nèi)容改變失去焦點(diǎn)后才觸發(fā)的,，現(xiàn)在在只讀文本框上根本沒有這些，它的內(nèi)容是通過js改變的,。于是,，需要尋找另外的方法。 這時(shí),，在網(wǎng)上找到了onpropertychange事件,。該事件在文本框?qū)傩愿淖儠r(shí)觸發(fā)，不管是通過什么方式改變的,。注意,，是屬性改變，而不僅僅是value改變,。一試，果然好使,。然而,，這個(gè)事件是IE專有的。WEB開發(fā),，必須得考慮瀏覽器的兼容問題,。于是繼續(xù)摸索…… 在網(wǎng)上有看到了另外一個(gè)事件：oninput。網(wǎng)上到處都是：fireFox中的該事件與IE中onpropertychange的事件等同,。然而,，我一試，發(fā)現(xiàn)根本不等同,。oninput事件在fireFox中似乎沒有起作用,。經(jīng)過一段時(shí)間測(cè)試，終于明白,，原來oninput并非與 onpropertychange等同（網(wǎng)上到處到處亂轉(zhuǎn)貼,，也不認(rèn)真測(cè)試一下）。oninput只在用戶輸入值改變時(shí)觸發(fā)（即value改變）,，并非所有屬性改變時(shí)觸發(fā),，而且，通過js改變value時(shí),，oninput不會(huì)觸發(fā),。這下郁悶了。好不容易看到點(diǎn)希望,，又再次陷入了失望,，還好沒有絕望……哎,，瀏覽器兼容問題真是麻煩。 左思右想,，總有又有了眉目,。對(duì)于fireFox等瀏覽器，可以通過定時(shí)器檢查只讀文本框的內(nèi)容是否改變,。測(cè)試后,，終于大功告成。下面把代碼貼出來與大家分享,。 在IE中的效果：  在FireFox中的效果：  另外,，我還在google Chrome測(cè)試也成功了（跟fireFox一樣的）。 HTML代碼 <table> <tr> <td>此處值通過js設(shè)置：</td> <td><input id="jsUserName" type="text" name="jsUserName" readonly/></td> </tr> <tr> <td>此處輸入值：</td> <td><input id="userName" type="text" name="userName"/></td> </tr> </table> Javascript代碼
$(function() { var jsUserName = ""; if($.browser.msie) // IE瀏覽器 { $("#userName").get(0).onpropertychange = setJsUserName; $("#jsUserName").get(0).onpropertychange = handle; } else // 其他瀏覽器 { var intervalName; // 定時(shí)器句柄 $("#userName").get(0).addEventListener("input",setJsUserName,false); // 獲得焦點(diǎn)時(shí),，啟動(dòng)定時(shí)器 $("#userName").focus(function(){ intervalName = setInterval(handle,1000); }); // 失去焦點(diǎn)時(shí),，清除定時(shí)器 $("#userName").blur(function() { clearInterval(intervalName); }); } // 設(shè)置jsUserName input的值 function setJsUserName() { $("#jsUserName").val($(this).val()); } // jsUserName input的值改變時(shí)執(zhí)行的函數(shù) function handle() { // IE瀏覽器此處判斷沒什么意義，但為了統(tǒng)一,，且提取公共代碼而這樣處理,。 if($("#jsUserName").val() != jsUserName) { $("#toolTip").remove(); $("#jsUserName").parent().append("<span id='toolTip'>看到這里的信息表明，通過js改變input的值也能響應(yīng)相應(yīng)事件：<span style='color:red;'>" + $("#jsUserName").val() + "</span></span>"); jsUserName = $("#jsUserName").val(); } } }); 說明：為了方便,，js代碼使用了jQuery,。不使用是一樣的。
另外,，考慮性能問題,，可以考慮何時(shí)啟動(dòng)定時(shí)器和清除定時(shí)器以及定時(shí)器延時(shí)時(shí)間。 總結(jié)：
1,、onchange事件與onpropertychange事件的區(qū)別： onchange事件在內(nèi)容改變（兩次內(nèi)容有可能還是相等的）且失去焦點(diǎn)時(shí)觸發(fā),；onpropertychange事件卻是實(shí)時(shí)觸發(fā)，即每增加或刪除一個(gè)字符就會(huì)觸發(fā),，通過js改變也會(huì)觸發(fā)該事件,，但是該事件IE專有。 2,、oninput事件與onpropertychange事件的區(qū)別： oninput事件是IE之外的大多數(shù)瀏覽器支持的事件,，在value改變時(shí)觸發(fā)，實(shí)時(shí)的,，即每增加或刪除一個(gè)字符就會(huì)觸發(fā),，然而通過js改變 value時(shí)，卻不會(huì)觸發(fā),；onpropertychange事件是任何屬性改變都會(huì)觸發(fā)的,，而oninput卻只在value改變時(shí)觸發(fā)，oninput要通過addEventListener()來注冊(cè),，onpropertychange注冊(cè)方式跟一般事件一樣,。（此處都是指在js中動(dòng)態(tài)綁定事件,，以實(shí)現(xiàn)內(nèi)容與行為分離） 3、oninput與onpropertychange失效的情況： （1）oninput事件：a). 當(dāng)腳本中改變value時(shí),，不會(huì)觸發(fā),；b). 從瀏覽器的自動(dòng)下拉提示中選取時(shí)，不會(huì)觸發(fā),。 （2）onpropertychange事件：當(dāng)input設(shè)置為disable=true后,，onpropertychange不會(huì)觸發(fā)。 如有問題或本人寫的不正確的地方歡迎聯(lián)系或指正,。 本文出自 “徐新華polaris” 博客,，請(qǐng)務(wù)必保留此出處http://polaris.blog.51cto.com/1146394/265667 |
|
|
