成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wangbjun / 2998人閱讀

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

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

compositionstart & compositionend

在 MDN 上找到了關(guān)于他們的描述，compositionstart 和 compositionend。簡單點(diǎn)描述如下：

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

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

input 和 compositionend 的觸發(fā)順序?qū)е碌膯栴}

注：以下為 chrome 瀏覽器下的測試結(jié)果，關(guān)于其他瀏覽器請看兼容說明！

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

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);

嗯。?？雌饋砗孟駴]啥問題，運(yùn)行后，卻有些讓人摸不著頭腦。在一段中文輸入完畢后卻并沒有在控制臺輸出任何數(shù)據(jù)。嗯。。測試后發(fā)現(xiàn) compositionend 事件是在 input 事件之后觸發(fā)的。

解決方法

最后只能用常規(guī)方法去解決：在 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);
關(guān)于兼容說明

以上測試是在 chrome 瀏覽器下進(jìn)行的，在 Firefox 和 Edge 瀏覽器下發(fā)現(xiàn) input 事件在 compositionend 事件之后觸發(fā)，且在輸入數(shù)字時發(fā)現(xiàn) Firefox 和 Edge 也會觸發(fā) compositionend 事件，以上內(nèi)容僅在 chrome 瀏覽器中適用。

寫在最后

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92260.html

相關(guān)文章

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

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

    gclove 評論0 收藏0

  • 說一說限制字?jǐn)?shù)的輸入框踩的坑

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

    luck 評論0 收藏0

  • 工作手記之移動端中文輸入法觸發(fā)oninput事件的解決方法

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

    姘存按 評論0 收藏0

  • 動態(tài)監(jiān)聽輸入框值的變化

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

    missonce 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<