前言
最近在用Polymer封裝純數字的輸入框，開發過程中發現不是坑，也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷：
-
[《動手寫個數字輸入框1：input[type=number]的遺憾》](http://www.cnblogs.com/fsjohn…
-
《動手寫個數字輸入框4：魔鬼在細節——打磨游標位置》
IE的先進性
辛辛苦苦終於控制只能輸入數字了，但只要使用者啟用了輸入法就輕鬆突破我們的重重包圍:-<心碎得一地都是。這是我們會想到底有沒有一個API可以禁用輸入法呢？答案是有的，但出人意料的是隻有IE才支援。
<style>
.disabled-ime-mode{
/*ime-mode為CSS3規則
*取值
*auto: 不影響IME的狀態，預設值
*normal: 正常的IME狀態
*active: 啟用本地語言輸入法
*inactive: 啟用非本地語言輸入法
*disabled: 禁用IME
*/
ime-mode: disabled;
}
</style>而其他瀏覽器就呵呵了。。。
別無他法只能補救～
由於chrome、firefox等無法通過樣式ime-mode來處理，因此想到依葫蘆畫瓢，同樣在keydown事件中對特定的keyCode進行攔截過濾就好了，誰知道在輸入法中按下字元鍵時keydown事件的keyCode永遠是229。其規律為：
-
按字元鍵時，keydown中keyCode恆為229，且key為Undefined;而keyup中才會得到正確的keyCode，且key為正確的字元。
-
按
enter和shift時僅觸發keydown不會觸發keyup，而keyCode為229。
因此我們能做的是 -
通過keyup事件作事後補救措施；
-
在keydown中攔截輸入法中輸入的
enter和shift按鍵事件，然後自行出發keyup事件執行補救措施。
廢話少講，上程式碼！
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)
, isHome = eq(36)
, isEnd = eq(35)
const isValidStr = precision =>
a => RegExp("^[+-]?[0-9]*"+ (precision ? "(\.[0-9]{0," + precision + "})?" : "") + "$").test(a)
// 獲取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, (o, v) => o.value = v)
, lensDataValue = lens(a => a && a.getAttribute(`data-value`), (a, v) => a && a.setAttribute(`data-value`, v))
const lensTargetMin = lcomp(lensTarget, lensMin)
, lensTargetMax = lcomp(lensTarget, lensMax)
, lensTargetPrecision = lcomp(lensTarget, lensPrecision)
, lensTargetValue = lcomp(lensTarget, lensValue)
const isIME = eq(229)
const isValidChar = c => /[-+0-9.]/.test(c)
const invalid2Empty = c => isValidChar(c) ? c : ``
const recoverValue = v => flatMap(CharSequence(v), invalid2Empty)
// 是否啟用IME
const isInIME = comp(isIME, keyCode)
// 是否為功能鍵
, isFnKey = comp(anyPass(isArrowLeft, isArrowRight, isArrowUp, isArrowDown, isBackspace, isDelete, isHome, isEnd), keyCode)
$(`input[type=text]`).addEventListener(`keydown`, e => {
var el = view(lensTarget)(e)
, val = view(lensTargetValue)(e)
// 暫存value值，keyup時發現問題可以恢復出廠設定
set(lensDataValue)(el)(val)
if (isInIME(e)){
fireKeyup(el)
}
})
$(`input[type=text]`).addEventListener(`keyup`, e => {
if (isFnKey(e)) return
var el = view(lensTarget)(e)
, v = view(lensValue)(el)
, p = view(lensTargetPrecision)(e)
, isValid = isValidStr(p)
, max = view(lensMax)(el)
, min = view(lensMin)(el)
var val = recoverValue(v)
var setVal = set(lensValue)(el)
if (isValid(val)){
if (val !== v){
setVal(val)
}
else{
var n = Number(v)
if (!gte(max)(n)){
setVal(max)
}
if (!lte(min)(n)){
setVal(min)
}
}
}
else{
setVal(attr(el, `data-value`))
}
})附錄：工具函式
// 工具函式，請無視我吧: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) => lenses
const view = lenses => a => {
if (!~Object.prototype.toString.call(lenses).indexOf(`Array`)){
lenses = [lenses]
}
return lenses.reduce((accu, lens) => accu && lens.getter(accu), a)
}
const set = lenses => a => v => {
if (!~Object.prototype.toString.call(lenses).indexOf(`Array`)){
lenses = [lenses]
}
var setLens = lenses.pop()
var o = view(lenses)(a)
if (o){
setLens.setter(o, v)
}
}
const $ = invoker(1, document, "querySelector")
const attr = (o, a) => invoker(1, o, `getAttribute`)(a)
const flatMap = (functor, f) => {
return functor.flatMap(f)
}
function CharSequence(v){
if (this instanceof CharSequence);else return new CharSequence(v)
this.v = v
}
CharSequence.prototype.flatMap = function(f){
return this.v.split(``).map(f).join(``)
}
const fireKeyup = (el) => {
if (KeyboardEvent){
// DOM3
var e = new KeyboardEvent(`keyup`)
el.dispatchEvent(e)
}
else{
// DOM2
var e = document.createEvent(`KeyboardEvent`)
e.initEvent(`keyup`, true, true)
el.dispatchEvent(e)
}
}未完待續
到這裡我們已經成功地控制了IME下的輸入，雖然事後補救導致使用者輸入出現閃爍的現象:D那是不是就over了呢？當然不是啦。
使用者輸入時，游標位置是隨機的，於是遺留以下問題:
-
在keydow中預判斷值合法性時，是假定游標位置處於行尾，將導致預判失誤;
-
在keyup中對value重新賦值時會導致游標移動到行尾，嚴重中斷了使用者的輸入流程;
-
type=text會導致在移動端無法自動顯示數字鍵盤。
總結
後面我們會針對上述問題繼續探討，敬請留意！
尊重原創，轉載請註明來自：http://www.cnblogs.com/fsjohn… ^_^肥仔John