文字欄位物件的異動事件偵測，常會因為瀏覽器版本、輸入方式(相同按鍵可能觸發的事件不同)、是否使用輸入法、與輸入法版本而有不同的差異，
因而造成常見的功能Autocomplete功能失效。
解決方案：
使用oninput事件（IE 9以上、Firefox、Opera、Safari、Chrome）、onpropertychange事件（只有IE 8以前版本支援）取代
舊有事件：
| 動作 | 事件順序 |
| 使用鍵盤輸入文字到物件中 |
1.onkeydown 2.onkeypress 3.oninput 4.onkeyup |
| 使用剪下或貼上文字到物件中 |
1.oncut / onpaste 2.oninput |
範例一：
<script type="text/javascript">// <![CDATA[
function myInputAction(event)
{
alert('我觸發了Input事件');
}
function myPropertyChangeAction(event)
{
alert('我觸發了PropertyChange事件');
}
// ]]></script>
<input oninput="myInputAction(event);" onpropertychange="myPropertyChangeAction(event);" id="txt01" name="txt01" value="文字輸入欄位範例一" type="text" />
範例二：
<head>
<script type="text/javascript">
// <![CDATA[
function initEvent()
{
var inputObj = document.getElementById ('txt02');
if (inputObj.addEventListener) {
// 除了Internet Explorer 8與之前版本的IE外，Internet Explorer 9以上、Google Chrome、Firefox、Opera、Safari都支援
inputObj.addEventListener ("input", myInputAction2, false);
// Internet Explorer 9以上、Google Chrome 和 Safari
inputObj.addEventListener ('textInput', myTextInputAction2, false);
}
if (inputObj.attachEvent) {
//Internet Explorer
inputObj.attachEvent ('onpropertychange', myPropertyChangeAction2); // Internet Explorer
}
}
function myTextInputAction2(event)
{
alert('我觸發了TextInput事件二');
}
function myInputAction2(event)
{
alert('我觸發了Input事件二');
}
function myPropertyChangeAction2(event)
{
alert('我觸發了PropertyChange事件二');
}
// ]]>
</script>
</head>
<body onload="initEvent();">
<textarea id="txt02" name="txt02"></textarea>
</body>
範例三：使用jQuery綁定
<script type="text/javascript">
// <![CDATA[
//要綁定事件的textarea物件
var textareaObj = $('textarea[name="txt03"]');
//.live jQuery 1.3~1.7
textareaObj.live('input textInput propertychange', function(){
myEvent();
});
//.delegate jQuery 1.4.3以上
textareaObj.delegate('textarea','input textInput propertychange', function(){
myEvent();
});
//.on jQuery 1.7以上
textareaObj.on('input textInput propertychange', function(){
myEvent();
});
function myEvent(){
alert('我觸發了事件');
}
// ]]>
</script>
<textarea id="txt03" name="txt03"></textarea>
參考資料：
oninput event | input event：http://help.dottoro.com/ljhxklln.php
onpropertychange event | propertychange event：http://help.dottoro.com/ljufknus.php
textInput event：http://help.dottoro.com/ljhiwalm.php
jQuery - 中文輸入法與KeyDown/KeyPress事件：http://blog.darkthread.net/post-2011-04-26-keypress-event-under-ime.aspx
使用中文輸入法時對鍵盤事件的處理：http://www.cnblogs.com/owenChen/p/3215421.html
留言列表
軟體開發 (1)
{{ article.title }}