|
|
有兩個(gè)文本框，其中一個(gè)只讀，另一個(gè)可以輸入。要求在可輸入文本框中輸入文本時(shí)，只讀文本框能夠獲得輸入的值，且只讀文本框旁邊出現(xiàn)提示信息，實(shí)時(shí)顯示只讀文本框的內(nèi)容。
這個(gè)功能看是簡單，但其實(shí)并沒有想象的那么簡單。（注意，可輸入框的處理沒什么可討論的，關(guān)鍵是只讀框的處理）
一開始，我們一般會想到在只讀文本框上運(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í)間測試，終于明白，原來oninput并非與onpropertychange等同（網(wǎng)上到處到處亂轉(zhuǎn)貼，也不認(rèn)真測試一下）。oninput只在用戶輸入值改變時(shí)觸發(fā)（即value改變），并非所有屬性改變時(shí)觸發(fā)，而且，通過js改變value時(shí)，oninput不會觸發(fā)。這下郁悶了。好不容易看到點(diǎn)希望，又再次陷入了失望，還好沒有絕望……哎，瀏覽器兼容問題真是麻煩。
左思右想，總有又有了眉目。對于fireFox等瀏覽器，可以通過定時(shí)器檢查只讀文本框的內(nèi)容是否改變。測試后，終于大功告成。下面把代碼貼出來與大家分享。
在IE中的效果：
FireFox中的效果圖：
另外，我還在google Chrome測試也成功了（跟fireFox一樣的）。
HTML代碼:
復(fù)制代碼 代碼如下:
<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代碼：
復(fù)制代碼 代碼如下:
$(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í)，啟動定時(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;" style="color:red;">" + $("#jsUserName").val() + "</span></span>");
jsUserName = $("#jsUserName").val();
}
}
});
說明：為了方便，js代碼使用了jQuery。不使用是一樣的。
另外，考慮性能問題，可以考慮何時(shí)啟動定時(shí)器和清除定時(shí)器以及定時(shí)器延時(shí)時(shí)間。
總結(jié)：
1、onchange事件與onpropertychange事件的區(qū)別：
onchange事件在內(nèi)容改變（兩次內(nèi)容有可能還是相等的）且失去焦點(diǎn)時(shí)觸發(fā)；onpropertychange事件卻是實(shí)時(shí)觸發(fā)，即每增加或刪除一個(gè)字符就會觸發(fā)，通過js改變也會觸發(fā)該事件，但是該事件IE專有。
2、oninput事件與onpropertychange事件的區(qū)別：
oninput事件是IE之外的大多數(shù)瀏覽器支持的事件，在value改變時(shí)觸發(fā)，實(shí)時(shí)的，即每增加或刪除一個(gè)字符就會觸發(fā)，然而通過js改變value時(shí)，卻不會觸發(fā)；onpropertychange事件是任何屬性改變都會觸發(fā)的，而oninput卻只在value改變時(shí)觸發(fā)，oninput要通過addEventListener()來注冊，onpropertychange注冊方式跟一般事件一樣。（此處都是指在js中動態(tài)綁定事件，以實(shí)現(xiàn)內(nèi)容與行為分離）
3、oninput與onpropertychange失效的情況：
（1）oninput事件：a). 當(dāng)腳本中改變value時(shí)，不會觸發(fā)；b). 從瀏覽器的自動下拉提示中選取時(shí)，不會觸發(fā)。
（2）onpropertychange事件：當(dāng)input設(shè)置為disable=true后，onpropertychange不會觸發(fā)。
如有問題或本人寫的不正確的地方歡迎聯(lián)系或指正。
JavaScript技術(shù)：js監(jiān)聽表單value的修改同步問題，跨瀏覽器支持，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
