您的位置:时时app平台注册网站 > web前端 > jQuery - 普通话輸入法與KeyDown/KeyPress事件【彩世界

jQuery - 普通话輸入法與KeyDown/KeyPress事件【彩世界

2019-11-08 03:51

進一步聯想,若寫的是: 購物商場、網路書城,若要讓 input 或 textarea 輸入框,能夠「立刻、精準地觸發」,只要利用 HTML5 的 input 事件,則不必本身寫程式去投入 AJAX 功效,就会輸鬆地達成供给。

  彩世界网址 1

寫了黄金年代段程式來做實驗:

oninput、onchange 比較

  使用 jQuery 庫的話,只要求同時綁定 oninput 和 onpropertychange 兩個事件就足以了,示例代碼如下:

jQuery - 普通话輸入法與KeyDown/KeyPress事件

这段时间專案中援引了Telerik ASP.NET擴充元器件AutoComplete輸入欄位,測試時發現偶爾會不聽始喚,輸入文字時無法觸發資料查詢,在Javascript Source Code裡反覆追蹤測試,燃燒了可觀的寶貴春青,終於理出頭緒: 問題在国语輸入法!

過去模糊地知道中文輸入在瀏覽器的鍵盤事件行為上稍稍特殊,但從未深究,這回算是比較清楚探讨之中的差別。其實最明顯的差異是: 切到汉语輸入法後,輸入文字將不會觸發KeyPress事件,只會有KeyDown,并且傳回的e.keyCode會大器晚成律是229。

寫了少年老成段程式來做實驗:

制版顯示純文字複製文字

本人使用倉頡輸入法(New ChangJie 二〇〇九),以IE9測試,操作過程及結果如下:

  1. 切換到新倉頡輸入法,點txtTest得到焦點準備輸入文字
  2. 按【一】(M鍵),出現KeyDown: 229
  3. 按Enter鍵確定選字,此時出現Input!
  4. 按數字1,出現KeyDown: 229跟Input!
  5. 选取滑鼠將輸入法切回阿拉伯语(不用按鍵切換制止觸發多餘事件)
  6. 按數字2,出現KeyDown: 50、KeyPress: 50以及Input!

FireFox4測試的結果與IE9相似。若將IE9切成IE7相容格局,結果不非常帅似,看來並不扶持Input事件

  1. 切換到新倉頡輸入法,點txtTest获得焦點準備輸入文字
  2. 按【一】(M鍵),出現KeyDown: 229
  3. 按空白鍵選字,再出現KeyDown: 229
  4. 按數字1,出現KeyDown: 229
  5. 应用滑鼠將輸入法切回捷克语(不用按鍵切換幸免觸發多餘事件)
  6. 按數字2,出現KeyDown: 50、KeyPress: 50

Chrome10的測試結果為:

  1. 切換到新倉頡輸入法,點txtTest拿到焦點準備輸入文字
  2. 按【一】(M鍵),出現KeyDown: 229跟Input!
  3. 按空白鍵選字,出現KeyDown: 229跟Input!
  4. 按數字1,出現KeyDown: 229跟Input!
  5. 运用滑鼠將輸入法切回印度语印尼语(不用按鍵切換幸免觸發多餘事件)
  6. 按數字2,出現KeyDown: 50、KeyPress: 50以及Input!

胡亂做個結論:

  • style="color: #ff8040;">輸入欄位啟用汉语輸入法時,將不會觸發KeyPress事件,而KeyDown事件中的 KeyCode則固定傳回229。IE9, Firefox 4, Chrome支援按鍵Input事件,在IE9/Firefox4上可輔助判別中文輸入的細節,但IE7不增派,Chrome的行為分歧。*

綜合以上觀察,要和谐搞出跨瀏覽器能够精準在使用者輸入每個字(不管有輸入法、不管中德文)時觸發的平地风波,看來是很艱鉅的任務。所幸網路上善心神人比超级多,找到意气风发個不錯的解法, Cross browser input event for jQuery, 這個Plugin重新包裝了input事件,所以小编們只需寫成:

$("#txtText").bind("input", function() {
    this.value; //可得到这两天的文字內容
});

就能够在历次輸入普通话字或德文字時觸發input事件,雖然無法精確掌握每趟的按鍵內容,但已可滿足精通普通话輸入格局下每一回文字變動的必要。[2011-04-26補充]要精確抓取每黄金年代個按鍵的keyCode,可考慮使用KeyUp事件(但連選字時的上下鍵,送字的Space都包罗在內),感謝drem補充!

為網路開發者社会群众体育按豆蔻梢头個讚!

 1 <!DOCTYPE html>
 2 <html >
 3 <head>
 4     <title>oninput</title>
 5     <script>
 6         function myFunc1(input) {
 7             document.getElementById("output1").value = 
 8                 input * 230;
 9         }
10     </script>
11 </head>
12 <body>
13     書名:快快樂樂學HTML5, <br />
14     價格:230, 購買數量:
15     <input id="input1" type="number" step="1" value="0" oninput="myFunc1(this.value)" />
16     <br /><br />
17     結帳金額:
18     <output id="output1"></output>
19 </body>
20 </html>

  集结 oninput & onpropertychange 監聽輸入框內容變化的亲自过问代碼如下:

彩世界网址 2


 

結合 HTML5 標準事件 oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化。

前些天專案中援用了Telerik ASP.NET擴充元器件AutoComplete輸入欄位,測試時發現偶爾會不聽始喚,輸入文字時無法觸發資料查詢,在Javascript Source Code裡反覆追蹤測試,燃燒了可觀的寶貴春青,終於理出頭緒: 問題在国语輸入法!

如下 html 程式碼,可測試出,input 事件可達成「即刻、精準地觸發」;舊有的 change 事件,則须求失去焦點時,或按下 Enter 時,才會被觸發。

  oninput 是 HTML5 的標準事件,對於檢測 textarea, input:text, input:password 和 input:search 這幾個成分通過用戶分界面發生的內容變化非常常有用,在內容修正後马上被觸發,不像 onchange 事件须求失去焦點才觸發。oninput 事件在主流瀏覽器的特别情況如下:

過去模糊地知道中文輸入在瀏覽器的鍵盤事件行為上有一点点异样,但從未深究,這回算是比較清楚研商之中的差別。其實最明顯的差異是: 切到汉语輸入法後,輸入文字將不會觸發KeyPress事件,只會有KeyDown,而且傳回的e.keyCode會风流罗曼蒂克律是229。

彩世界网址 3
圖 1 執行結果

<head>
    <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: "   event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: "   event.srcElement.value);
            }
        } 
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>

彩世界网址 4

HTML5 的 input 事件,首要的缺點,是不扶助微軟的 IE 瀏覽器,但扶持Chrome、Firefox、Opera、Safari、微軟的 Edge。

  在監聽到 onpropertychange 事件后,可以动用 event 的 propertyName 屬性來獲取發生變化的屬性名稱。

 

既往 HTML 的 input 輸入框,無法即時反映使用者的輸入內容。
onkeyup、onkeydown 事件,無法即時、精確地得到使用者的輸入資料;而 onchange、onblur 事件,要等到失去焦點時,或按下 Enter 時,才會被觸發。

  從下边表格能够看到,oninput 事件在 IE9 以下版本不扶助,须求使用 IE 特有的 onpropertychange 事件代表,這個事件在用戶界面改變或然应用腳本直接改动內容兩種情況下都會觸發,有以下幾種情況:

相關作品:

[1] HTML 事件性质

[2] HTML5 input 事件检查测验输入框变化

[3] HTML5 标准事件 oninput 达成输入检查实验

 

現在 HTML5 新扩展的 input 事件,可達成「登时、精準地觸發」,類似 AJAX 作用。唯生龙活虎的缺點,是不扶助 IE 瀏覽器,但帮忙其余各瀏覽器。

 

彩世界网址 5彩世界网址 6

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length   ' characters');
});

 

  • 校订了 input:checkbox 或然 input:radio 成分的選擇中狀態, checked 屬性發生變化。
  • 修改了 input:text 恐怕 textarea 成分的值,value 屬性發生變化。
  • 改善了 select 成分的選中項,selectedIndex 屬性發生變化。

如下 html 程式碼:

由此在網頁裡,引用那件事件,對手機、平板上的操作,並不变成影響。


參考書籍:

[1] HTML5 完美風暴(第三版卡塔 尔(英语:State of Qatar), ch5, 笔者:呂高旭

 1 <!DOCTYPE html>
 2 <html >
 3 <head>    
 4     <script>
 5         function myFunc1(input) {
 6             document.getElementById("output1").value = input;
 7         }
 8         
 9         function myFunc2(input) {
10             document.getElementById("output2").value = input;
11         }
12     </script>
13 </head>
14 <body>
15     <input id="input1" type="text" oninput="myFunc1(this.value)" />
16     <br />
17     <input id="input2" type="text" onchange="myFunc2(this.value)" />
18     <p></p>
19     <output id="output1"></output>
20     <br />
21     <output id="output2"></output>
22 </body>
23 </html>

本文由时时app平台注册网站发布于web前端,转载请注明出处:jQuery - 普通话輸入法與KeyDown/KeyPress事件【彩世界

关键词: