国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

gclove / 1285人閱讀

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

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

compositionstart & compositionend

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

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

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

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

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

和大多數(shù)人的想法一樣，我考慮使用一個(gè)布爾值來判斷是否在等待輸入法的輸入，然后在 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)行后，卻有些讓人摸不著頭腦。在一段中文輸入完畢后卻并沒有在控制臺(tái)輸出任何數(shù)據(jù)。嗯。。測試后發(fā)現(xiàn) compositionend 事件是在 input 事件之后觸發(fā)的。

解決方法

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

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ù)字時(shí)發(fā)現(xiàn) Firefox 和 Edge 也會(huì)觸發(fā) compositionend 事件，以上內(nèi)容僅在 chrome 瀏覽器中適用。

寫在最后

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/51615.html

相關(guān)文章

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

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

    wangbjun 評(píng)論0 收藏0

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

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

    luck 評(píng)論0 收藏0

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

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

    姘存按 評(píng)論0 收藏0

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

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

    missonce 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<