解決oninput事件在中文輸入法下會取得拼音的值的問題

wangbjun 發布于2019-08-22 11:21 / 2995人閱讀

摘要：簡單點描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會觸發。在輸入中文或者語音等完畢或取消時，事件會觸發。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數據。測試后發現事件是在事件之后觸發的。

在做搜索等功能時，很多時候我們需要實時獲取用戶輸入的值，而常常會得到類似 w"m 這樣的拼音。為了解決這個問題，我在網上搜索了下相關問題，發現了兩個陌生的事件：compositionstart 和 compositionend。

compositionstart & compositionend

在 MDN 上找到了關于他們的描述，compositionstart 和 compositionend。簡單點描述如下：

compositionstart：在輸入中文或者語音等需要等待一連串的輸入的操作之前，compositionstart 事件會觸發。

compositionend：在輸入中文或者語音等完畢或取消時，compositionend 事件會觸發。

input 和 compositionend 的觸發順序導致的問題

注：以下為 chrome 瀏覽器下的測試結果，關于其他瀏覽器請看兼容說明！

和大多數人的想法一樣，我考慮使用一個布爾值來判斷是否在等待輸入法的輸入，然后在 input 事件中根據其布爾值決定是否獲取輸入的值，初始代碼如下：

var isInputZh = false;
  
elem.addEventListener("compositionstart", function (e) {
  isInputZh = true;
}, false);
elem.addEventListener("compositionend", function (e) {
  isInputZh = false;
}, false);
elem.addEventListener("input", function (e) {
  if (isInputZh) return;
  var value = this.value;
  console.log(value);
  doSomething(value);
}, false);

嗯。。看起來好像沒啥問題，運行后，卻有些讓人摸不著頭腦。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數據。嗯。。測試后發現 compositionend 事件是在 input 事件之后觸發的。

解決方法

最后只能用常規方法去解決：在 compositionend 和 input 事件中都得加入對輸入值的處理。代碼如下：

var isInputZh = false;
var search = document.querySelector("input");

search.addEventListener("compositionstart", function (e) {
  isInputZh = true;
}, false);
search.addEventListener("compositionend", function (e) {
  isInputZh = false;

  doSomething(search.value);
}, false);
search.addEventListener("input", function (e) {
  if (isInputZh) return;
  var value = this.value;

  doSomething(value);
}, false);

關于兼容說明

以上測試是在 chrome 瀏覽器下進行的，在 Firefox 和 Edge 瀏覽器下發現 input 事件在 compositionend 事件之后觸發，且在輸入數字時發現 Firefox 和 Edge 也會觸發 compositionend 事件，以上內容僅在 chrome 瀏覽器中適用。

寫在最后

原文發在 github。如果大家有什么好的解決方案歡迎在評論中提出。

GPU云服務器云服務器 asp 取得數組的值 js鍵值對的值的數據類型導航控件傳值的問題手機qq拼音輸入法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92260.html

解決oninput事件在中文輸入法下會取得拼音的值的問題

摘要：簡單點描述如下在輸入中文或者語音等需要等待一連串的輸入的操作之前，事件會觸發。在輸入中文或者語音等完畢或取消時，事件會觸發。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數據。測試后發現事件是在事件之后觸發的。在做搜索等功能時，很多時候我們需要實時獲取用戶輸入的值，而常常會得到類似 wm 這樣的拼音。為了解決這個問題，我在網上搜索了下相關問題，發現了兩個陌生的事件：compositio...

gclove 2019-08-01 18:16 評論0 收藏0
說一說限制字數的輸入框踩的坑

摘要：所以最后犧牲了下用戶體驗，找到了一個折中的方式輸入框失去焦點時即，或者用戶輸入回車鍵時才進行內容長度的檢測。當然如果發現輸入框內容超過限制，要將光標停留在輸入框內，方便用戶進行修改。前言最近產品需要做不少輸入框，產品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實時顯示已經輸入的字符個數，當超過數量限制時輸入框邊框變紅，同時給用戶提示信息。這交互聽起來沒啥問題，技術實現上似...

luck 2019-08-21 14:16 評論0 收藏0
工作手記之移動端中文輸入法觸發oninput事件的解決方法

摘要：經過在網上的查找，找到了和兩個事件進行一個開關判斷。關于事件是的標準事件，對于檢測和這幾個元素通過用戶界面發生的內容變化非常有用，在內容修改后立即被觸發，不像事件需要失去焦點才觸發。補充最近測試了下發現在事件之后才觸發。。。事件背景工作過程中涉及到了移動端輸入內容長度的限定，這就要求需要對輸入過程中內容的變化進行監控和判定，以決定是否可以繼續輸入，所以就想著是否可以在相關輸入處監聽...

姘存按 2019-08-20 12:21 評論0 收藏0
動態監聽輸入框值的變化

摘要：以上事件是鍵盤事件，但是當使用作為監聽事件時，會發現一些復制粘貼等操作用不了。二輸入框事件和都是事件對象，當輸入框的值發生改變時觸發該事件。不同的是，是在值改變時立即觸發，而是在值改變后失去焦點才觸發，并且可以用在非輸入框中，如等。一、鍵盤事件 1.onkeydownonkeydown 事件會在用戶按下一個鍵盤按鍵時發生。2.onkeypress onkeypress 事件會在鍵盤按...

missonce 2019-08-26 11:58 評論0 收藏0