摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。因此我們要繼續補充下面兩步,并且由于事件觸發時值還沒被修改,于是我們需要將值和當前輸入值做組合來做預判,進一步擴大非法字符集。
前言
?最近在用Polymer封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷:
《動手寫個數字輸入框1:input[type=number]的遺憾》
《動手寫個數字輸入框2:起手式——攔截非法字符》
《動手寫個數字輸入框3:痛點——輸入法是個魔鬼》
《動手寫個數字輸入框4:魔鬼在細節——打磨光標位置》
從源頭抓起——攔截非法字符?從《動手寫個數字輸入框1:input[type=number]的遺憾》中我們了解到input[type=number]基本不能滿足我們的需求,為了簡單化我們就直接在input[type=text]上加工出自己的數字輸入框吧。
?首先很明確的一點是最終數值可以包含以下字符[+-0-9.],而可輸入的功能鍵為Backspace,Delete,Arrow-Left,Arrow-Right,Arrow-Up,Arrow-Down和Tab。
于是我們可以設置如下規則了
// 斷言庫 const keyCode = anyPass(prop("keyCode"), prop("which")) const isBackspace = eq(8) , isDelete = eq(46) , isArrowLeft = eq(37) , isArrowRight = eq(38) , isArrowUp = eq(39) , isArrowDown = eq(40) , isTab = eq(9) , isMinus = anyPass(eq(109), eq(189)) , isDot = anyPass(eq(110), eq(190)) , isDigit = anyPass( allPass(lte(49), gte(57)) , allPass(lte(96), gte(105))) , isPlus = anyPass( comp(eq(107), keyCode) , allPass( prop("shiftKey") , comp(eq(187), keyCode))) const isValid = anyPass( comp( anyPass(isBackspace, isDelete, isArrowLeft , isArrowLeft, isArrowUp, isArrowDown , isTab, isMinus, isDot, isDigit) , keyCode) , isPlus) $("input[type=text]").addEventListener("keydown", e => { if (!isValid(e)){ e.preventDefault() } })擴大非法字符集
?還記得min,max,precision嗎?
當min大于等于0時,負號應該被納入非法字符;
當max小于0時,正號應該被納入非法字符;
當precision為0時,小數點應該被納入非法字符。于是我們添加如下規則,并修改一下isValid就好了
// 獲取min,max,precision值 const lensTarget = lens(a => a.target || a.srcElement) , lensMin = lens(a => Number(a.min) || Number(attr(a, "min")) || Number.MIN_SAFE_INTEGER) , lensMax = lens(a => Number(a.max) || Number(attr(a, "max")) || Number.MAX_SAFE_INTEGER) , lensPrecision = lens(a => Number(a.precision) || Number(attr(a, "precision")) || 0) , lensValue = lens(a => a.value) const lensTargetMin = lcomp(lensTarget, lensMin) , lensTargetMax = lcomp(lensTarget, lensMax) , lensTargetPrecision = lcomp(lensTarget, lensPrecision) const isValid = anyPass( comp( anyPass(isBackspace, isDelete, isArrowLeft , isArrowLeft, isArrowUp, isArrowDown , isTab, isDigit) , keyCode) , allPass( comp(gt(0), view(lensTargetMin)) , comp(isMinus, keyCode)) , allPass( comp(lte(0), view(lensTargetMax)) , isPlus) , allPass( comp(lt(0), view(lensTargetPrecision)) , comp(isDot, keyCode)))預判斷
?到這里為止我們已經成功地攔截了各種非法字符,也就是最終值必須之含[+-0-9.],但含這些字符跟整體符合數值格式就是兩回事了。因此我們要繼續補充下面兩步,并且由于keydown事件觸發時value值還沒被修改,于是我們需要將value值和當前輸入值做組合來做預判,進一步擴大非法字符集。
通過正則檢查最終值是否符合格式要求(是否存在多個小數點也會在這一步處理掉);
檢查最終值是否在min和max范圍內。
const isValidStr = precision => a => RegExp("^[+-]?[0-9]*"+ (precision ? "(.[0-9]{0," + precision + "})?" : "") + "$").test(a) const lensValue = lens(a => a.value) , lensTargetValue = lcomp(lensTarget, lensValue) $("input[type=text]").addEventListener("keydown", e => { var prevented = true // 攔截非法字符 if (isValid(e)){ prevented = false // 預判斷 if (anyPass(comp(anyPass(isMinus, isDigit, isDot), keyCode), isPlus)(e)){ var str = view(lensTargetValue)(e) + prop("key")(e) // 預判斷格式 prevented = !isValidStr(view(lensTargetPrecision)(e))(str) // 預判斷值范圍 if (!prevented){ if (str == "-") str = "-0" if (str == "+") str = "0" if (str == ".") str = "0" prevented = !allPass( gte(view(lensTargetMax)(e)) , lte(view(lensTargetMin)(e)))(Number(str)) } } } if (prevented){ e.preventDefault() } })附錄:工具函數
// 工具函數,請無視我吧:D const comp = (...fns) => (...args) => { let len = fns.length while (len--){ args = [fns[len].apply(null, args)] } return args.length > 1 ? args : args[0] } const isSome = x => "undefined" !== typeof x && x !== null const invokerImpl = n => o => m => (...args) => { let args4m = args.splice(0, n) , times = Number(args[0]) || 1 , ret = [] while (times--){ var tmpRet try{ tmpRet = o[m].apply(o, args4m) } catch(e){ tmpRet = void 0 } ret.push(tmpRet) } return ret.length > 1 ? ret : ret[0] } const curry2Partial = fn => (...args) => { let c = true , i = 0 , l = args.length , f = fn for (;c && i < l; ++i){ c = isSome(args[i]) if (c){ f = f(args[i]) } } return f } const invoker = curry2Partial(invokerImpl) const and = (...args) => args.reduce((accu, x) => accu && x, true) const or = (...args) => args.reduce((accu, x) => accu || x, false) const allPass = (...fns) => v => fns.reduce((accu, x) => accu && x(v), true) const anyPass = (...fns) => v => fns.reduce((accu, x) => accu || x(v), false) const eq = a => b => a === b const gt = a => b => a > b const gte = a => anyPass(eq(a), gt(a)) const lt = a => b => a < b const lte = a => anyPass(eq(a), lt(a)) const prop = k => o => o[k] const lens = (g, s) => ({getter: g, setter: s}) const lensPath = (...args) => ({ getter: a => args.reduce((accu, x) => accu && accu[x], a) }) const lcomp = (...lenses) => ({ getter: a => lenses.reduce((accu, lens) => accu && lens.getter(accu), a)}) const view = l => a => l.getter(a) const $ = invoker(1, document, "querySelector") const attr = (o, a) => invoker(1, o, "getAttribute")(a)總結
?現在可以終于可以牢牢控制住用戶輸入了,直到用戶切換到IME為止:-<當使用IME輸入時會發現上述措施一點用也沒有,不用皺眉了,后面我們會一起把IME KO掉!
尊重原創,轉載請注明來自:http://www.cnblogs.com/fsjohn... ^_^肥仔John
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88293.html
摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。因此我們要繼續補充下面兩步,并且由于事件觸發時值還沒被修改,于是我們需要將值和當前輸入值做組合來做預判,進一步擴大非法字符集。 前言 ?最近在用Polymer封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷: 《動手寫個數字輸入框1:input[...
摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不少坑,也有很多值得研究的地方。的值除了影響微調按鈕的步長外,還影響表單驗證信息。 前言 ?最近在用Polymer封裝純數字的輸入框,開發過程中發現不少坑,也有很多值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷: 《動手寫個數字輸入框1:input[type=number]的遺憾》 《動手寫個數字輸入框2:起手式——攔截非法...
摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。因此我們能做的是通過事件作事后補救措施在中攔截輸入法中輸入的和按鍵事件,然后自行出發事件執行補救措施。 前言 ?最近在用Polymer封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷: [《動手寫個數字輸入框1:input[type=number...
閱讀 2328·2021-11-22 14:56
閱讀 1460·2021-09-24 09:47
閱讀 904·2019-08-26 18:37
閱讀 2818·2019-08-26 12:10
閱讀 1522·2019-08-26 11:55
閱讀 3140·2019-08-23 18:07
閱讀 2294·2019-08-23 14:08
閱讀 605·2019-08-23 12:12