前言
最近在用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/fsjohnhuang/p/6929167.html _肥仔John