快捷導(dǎo)航

檢測input每次的輸入是否合法遇到漢字輸入就有問題

更新時間：2012年05月23日 19:03:01 作者：

檢測input每次的輸入是否合法遇到漢字輸入就有問題，如何判斷漢字是否已經(jīng)輸入到input內(nèi)

記錄一下資料，就這幾天測試一下然后發(fā)布成果

 
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('xx').attachEvent('onpropertychange',function(o){alert('ok')}); 
//--> 
</script> 

執(zhí)行上面的代碼，單擊輸入框發(fā)現(xiàn)也會觸發(fā)onpropertychange，輸入一個值同樣也會觸發(fā)這個事件，這就證明了，只要有屬性的值被修改就會觸發(fā)該事件。

第二、既然我們發(fā)現(xiàn)了這個特點，那就會有一個問題了：當(dāng)我們有時在輸入框值發(fā)生改變時希望執(zhí)行一個函數(shù)操作，但同時也要修改一個自定義的屬性，這樣onpropertychange就會被觸發(fā)兩次，這個可能并不是我們所希望的。
猜想一下，既然提供了這么一個屬性，那一定應(yīng)該能獲取到是哪個屬性被改變了。試著獲取參數(shù)個數(shù)及參數(shù)內(nèi)容。

復(fù)制代碼代碼如下:

 
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('xx').attachEvent('onpropertychange',function(){ 
alert(arguments.length); 
for(var i=0;i<arguments.length;i++){ 
alert(arguments[i]); 
} 
}); 
//--> 
</script> 

執(zhí)行上面一段代碼，會發(fā)現(xiàn)彈出了1和[object]，這說明該事件只給回調(diào)函數(shù)傳入一個參數(shù)而且是object類型。
那我們就試試遍歷一下這個object。

復(fù)制代碼代碼如下:

 
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('xx').attachEvent('onpropertychange',function(o){ 
for(var item in o){ 
alert(item+":"+o[item]); 
} 
}); 
//--> 
</script> 

執(zhí)行一下，發(fā)現(xiàn)有很多個屬性，但仔細(xì)看我們可能會發(fā)現(xiàn)這么一個屬性：propertyname，相信每個人都能猜到這個屬性的意思了。對，這個就是用來獲取哪個屬性被修改的。

復(fù)制代碼代碼如下:

 
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('xx').attachEvent('onpropertychange',function(o){ 
alert(o.propertyName); 
}); 
//--> 
</script> 

分別單擊文本框和輸入一個值，會發(fā)現(xiàn)分別彈出了myprop和value。

再回到我們開始的問題，我們只需要判斷是否是value被改變就ok了。
直接看代碼吧：

復(fù)制代碼代碼如下:

 
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('xx').attachEvent('onpropertychange',function(o){ 
if(o.propertyName!='value')return; //不是value改變不執(zhí)行下面的操作 
//.......函數(shù)處理 
}); 
//--> 
</script> 

三.讓FF支持onPropertyChange類似的效果

之前做了個對input框的實時校驗，比如只允許輸入數(shù)字，用戶輸入的卻是字母等，這時候就把用戶輸入的值變?yōu)榧t色等...或者對textarea文本域剩余可輸入字符的提示，就遇到了一個問題，使用onPropertyChange在IE下很好很正常，但是在FF上就么效果鳥~~~

于是在網(wǎng)上就找到了一個可行性方法~~ Firefox有個oninput事件效果和onPropertyChange一樣，所以同時加上oninput和onPropertyChange問題就解決鳥~~~ oo....

<input type="text" oninput="cgColor(this);" onPropertyChange="cgColor(this);" maxlength="4" name="pt_bankou" id="pt_bankou" value="" />

您可能感興趣的文章: