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

fuyi501 發布于2019-08-22 18:35 / 3229人閱讀

摘要：完善的輸入框監聽方案監聽輸入框的輸入，最原始的方法是使用事件。它只會在輸入框的值發生變化后被觸發，不過及以下不支持該事件。組合輸入事件應運而生，常用的是組輸開始和組輸結束事件。

完善的輸入框監聽方案 keyup

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

input

我們只希望當值發生變化后再觸發監聽，這樣，input事件出現了。
它只會在輸入框的值發生變化后被觸發，不過IE8及以下不支持該事件。

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

接著上步，如何在不支持input事件時使用keyup事件呢？
直接檢測事件不太靠譜，可以利用input在keyup之前發生的性質，巧妙的實現此功能。

延遲函數

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

英文一般為 300ms ，中文可設置成 500ms 。

組合

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

組合輸入事件應運而生，常用的是compositionstart（組輸開始）和compositionend（組輸結束）事件。
結合組合事件不監聽普通的輸入，以及compositionstart發生在input事件之前，可以如此優化中文輸入

結合

最后是結合以上幾步生成一個融合方法，代碼加示例：

里面還做了些增強：
比如監聽函數返回的是一個，移除這一步所加的所有事件的方法。
比如配置是否監聽組合輸入事件，因為好的搜索框會直接根據拼音開始搜索，無需等到漢字的形成。

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

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

云服務器 GPU云服務器輸入框監聽 html輸入框和文字 js的禁止輸入框輸入 python的輸入框

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

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

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

摘要：文章分享了，如何一步步優化輸入框的監聽事件，以達到兼容高效和組合輸入友好等目標。完善的輸入框監聽方案監聽輸入框的輸入，最原始的方法是使用事件。它只會在輸入框的值發生變化后被觸發，不過及以下不支持該事件。文章分享了，如何一步步優化輸入框的監聽事件，以達到兼容、高效和組合輸入友好等目標。完善的輸入框監聽方案 keyup 監聽輸入框的輸入，最原始的方法是使用keyup事件。不使用ch...

Labradors 2019-08-22 18:30 評論0 收藏0
優秀博文收藏（不定期更新）

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

sunsmell 2019-08-26 13:54 評論0 收藏0
優秀博文收藏（不定期更新）

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

zhangfaliang 2019-08-30 10:57 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

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

netmou 2019-08-23 12:28 評論0 收藏0