1.需求

? ? ? ? 限制輸入框只能輸入漢字，限制輸入框只能輸入數(shù)字。輸入同時(shí)做驗(yàn)證，目的是禁止輸入而不是輸入后再驗(yàn)證。

????????例：客戶輸入的特殊字符不存續(xù)在輸入框內(nèi)，粘貼到輸入框的文字段自動(dòng)只剩下漢字/數(shù)字。

2.解決方案

? ? ? ? 先說(shuō)我找到的最佳解決方案。主要邏輯：獲取焦點(diǎn)時(shí)設(shè)置定時(shí)器，開(kāi)始輪詢驗(yàn)證，失去焦點(diǎn)后清除定時(shí)器。
? ? ? ? 優(yōu)點(diǎn)：有著極高的兼容性，通用性，textarea也適用。適用事件為經(jīng)典事件，幾乎所有框架，相關(guān)組件都可以使用，基本能兼容各種瀏覽器，設(shè)備。
? ? ? ? 上代碼：圖中使用的是element的el-input組件。

圖1.HTML部分

? ? ? ? 圖中設(shè)置的是0.1秒驗(yàn)證一次，每次驗(yàn)證將輸入框內(nèi)容不符合正則的字符去除。驗(yàn)證間隔可以自己設(shè)置更短。獲取焦點(diǎn)時(shí)開(kāi)始驗(yàn)證，失去焦點(diǎn)后停止驗(yàn)證。

圖2.function部分

? ? ? ? 很簡(jiǎn)單，很通用，使用其他正則亦可。不同需求只要替換正則表達(dá)式即可。

3.棄用方案

? ? ? ? keyup動(dòng)作時(shí)驗(yàn)證：移動(dòng)端兼容性不好
? ? ? ? clipboard粘貼時(shí)驗(yàn)證：瀏覽器安全策略限制讀取設(shè)備粘貼板，功能有限。
? ? ? ? input動(dòng)作時(shí)驗(yàn)證：不兼容IE，需要瀏覽器查詢。對(duì)組件不友好，未達(dá)到需求效果。

? ? ? ? 4.tips：
????????????????vue組件綁定某些動(dòng)作需要原型綁定（.native）。
????????????????本次采用的解決方案不需要原型綁定，請(qǐng)直接綁定在el-input上。

轉(zhuǎn)載到其他平臺(tái)需含本文的簡(jiǎn)書(shū)鏈接

前端豆知識(shí)，很小卻有用