文字欄位物件的異動事件偵測,常會因為瀏覽器版本、輸入方式(相同按鍵可能觸發的事件不同)、是否使用輸入法、與輸入法版本而有不同的差異,

因而造成常見的功能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

, , ,

K 發表在 痞客邦 PIXNET 留言(0) 人氣()