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組件。
? ? ? ? 圖中設(shè)置的是0.1秒驗(yàn)證一次寺滚，每次驗(yàn)證將輸入框內(nèi)容不符合正則的字符去除柑营。驗(yàn)證間隔可以自己設(shè)置更短。獲取焦點(diǎn)時(shí)開(kāi)始驗(yàn)證村视，失去焦點(diǎn)后停止驗(yàn)證官套。
? ? ? ? 很簡(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ū)鏈接
