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

資訊專欄INFORMATION COLUMN

完善的輸入框監(jiān)聽方案：兼容、高效和組合輸入友好

Labradors / 2888人閱讀

摘要：文章分享了，如何一步步優(yōu)化輸入框的監(jiān)聽事件，以達(dá)到兼容高效和組合輸入友好等目標(biāo)。完善的輸入框監(jiān)聽方案監(jiān)聽輸入框的輸入，最原始的方法是使用事件。它只會(huì)在輸入框的值發(fā)生變化后被觸發(fā)，不過及以下不支持該事件。

文章分享了，如何一步步優(yōu)化輸入框的監(jiān)聽事件，以達(dá)到兼容、高效和組合輸入友好等目標(biāo)。

完善的輸入框監(jiān)聽方案 keyup

監(jiān)聽輸入框的輸入，最原始的方法是使用keyup事件。
不使用change事件，它只會(huì)在輸入框失去焦點(diǎn)后被觸發(fā)。
此方式兼容性廣，但效率較低，畢竟任意的按鍵都會(huì)觸發(fā)該事件。
input

我們只希望當(dāng)值發(fā)生變化后再觸發(fā)監(jiān)聽，這樣，input事件出現(xiàn)了。
它只會(huì)在輸入框的值發(fā)生變化后被觸發(fā)，不過IE8及以下不支持該事件。

網(wǎng)上很多人使用IE獨(dú)有的propertychange事件，作為替代input的方案，這里不推薦。
一方面它會(huì)在任意屬性值變化后被觸發(fā)，沒有專一性，不夠語義，比較浪費(fèi)。
二方面網(wǎng)上都是用jQuery等工具庫操作，比較簡(jiǎn)單，而我們的目的是用原生代碼實(shí)現(xiàn)。
三方面是不支持input事件的瀏覽器已經(jīng)很少了，硬碰上了就用keyup對(duì)付。

接著上步，如何在不支持input事件時(shí)使用keyup事件呢？
直接檢測(cè)事件不太靠譜，可以利用input在keyup之前發(fā)生的性質(zhì)，巧妙的實(shí)現(xiàn)此功能。
延遲函數(shù)

在搜索功能中，理想化的情景是當(dāng)用戶全部輸入后，再立即執(zhí)行搜索。
那么問題來了，如何在不需要用戶點(diǎn)擊搜索按鈕的情況下，得知其過程的完成呢？沒有辦法。
雖然沒有辦法，但有優(yōu)化的方式：假定用戶每個(gè)單詞的輸入間隔，以此時(shí)間延遲執(zhí)行搜索功能。

英文一般為 300ms ，中文可設(shè)置成 500ms 。
composition

中文、日文等需要借助輸入法組合輸入，即便是英文，現(xiàn)在也可借助組合輸入進(jìn)行選詞等。
實(shí)際中，我們希望將用戶組合輸入完的一段文字，而不是每輸入一個(gè)字母，算做一次輸入的完成。

組合輸入事件應(yīng)運(yùn)而生，常用的是compositionstart（組輸開始）和compositionend（組輸結(jié)束）事件。
結(jié)合組合事件不監(jiān)聽普通的輸入，以及compositionstart發(fā)生在input事件之前，可以如此優(yōu)化中文輸入。
結(jié)合

最后是結(jié)合以上幾步生成一個(gè)融合方法，代碼加示例：地址。

里面還做了些增強(qiáng)：
比如監(jiān)聽函數(shù)返回的是一個(gè)，移除這一步所加的所有事件的方法。
比如配置是否監(jiān)聽組合輸入事件，因?yàn)楹玫乃阉骺驎?huì)直接根據(jù)拼音開始搜索，無需等到漢字的形成。

代碼使用ES6語法，需使用支持ES6的瀏覽器（Chrome最新版）或轉(zhuǎn)碼后才能使用，諒解。

function listenInput(dom, callback, {
  timeout = 300,
  useCompositionEvent = true
} = {}) {
  let value = "";
  let inInputEvent = false;
  let inCompositionEvent = false;
  let trigger = createDelayFunction(valueChanged, timeout);

  // Return a function that can remove listeners added here.
  return enabledEvent(dom);

  function valueChanged(val) {
    if (val === value) {
      return ;
    } else {
      value = val;
    }

    callback(value, { dom: dom });
  }

  function enabledEvent(dom) {
    dom.addEventListener("keyup", keyup);
    dom.addEventListener("input", input);
    useCompositionEvent && dom.addEventListener("compositionstart", compositionstart);
    useCompositionEvent && dom.addEventListener("compositionend", compositionend);

    return function() {
      dom.removeEventListener("keyup", keyup);
      dom.removeEventListener("input", input);
      useCompositionEvent && dom.removeEventListener("compositionstart", compositionstart);
      useCompositionEvent && dom.removeEventListener("compositionend", compositionend);
    };

    function keyup() {
      if (inInputEvent) {
        dom.removeEventListener("keyup", keyup);
      } else {
        trigger(this.value);
      }
    }
    
    function input() {
      if (!inInputEvent) inInputEvent = true;
      if (!inCompositionEvent) trigger(this.value);
    }
    
    function compositionstart() {
      inCompositionEvent = true;
    }
    
    function compositionend() {
      inCompositionEvent = false;
      trigger(this.value);
    }
  }
}

function createDelayFunction(fn, timeout = 300) {
  let timeoutId = -1;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(null, args);
    }, timeout);
  }
}

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

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

相關(guān)文章

  • 完善的輸入框監(jiān)聽方案：兼容、高效和組合輸入友好

    摘要：完善的輸入框監(jiān)聽方案監(jiān)聽輸入框的輸入，最原始的方法是使用事件。它只會(huì)在輸入框的值發(fā)生變化后被觸發(fā)，不過及以下不支持該事件。組合輸入事件應(yīng)運(yùn)而生，常用的是組輸開始和組輸結(jié)束事件。 完善的輸入框監(jiān)聽方案 keyup 監(jiān)聽輸入框的輸入，最原始的方法是使用keyup事件。 不使用change事件，它只會(huì)在輸入框失去焦點(diǎn)后被觸發(fā)。 此方式兼容性廣，但效率較低，畢竟任意的按鍵都會(huì)觸發(fā)該事件。 ...

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

  • 優(yōu)秀博文收藏（不定期更新）

    摘要：我的書簽我的書簽謹(jǐn)慎導(dǎo)入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優(yōu)雅一勞永 我的書簽 我的書簽（謹(jǐn)慎導(dǎo)入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

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

  • 優(yōu)秀博文收藏（不定期更新）

    摘要：我的書簽我的書簽謹(jǐn)慎導(dǎo)入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優(yōu)雅一勞永 我的書簽 我的書簽（謹(jǐn)慎導(dǎo)入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

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

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

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

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

0條評(píng)論

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