国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

動手寫個數字輸入框3:痛點——輸入法是個魔鬼

yy13818512006 / 1204人閱讀

摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。因此我們能做的是通過事件作事后補救措施在中攔截輸入法中輸入的和按鍵事件,然后自行出發事件執行補救措施。

前言

?最近在用Polymer封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷:

[《動手寫個數字輸入框1:input[type=number]的遺憾》](http://www.cnblogs.com/fsjohn...

《動手寫個數字輸入框2:起手式——攔截非法字符》

《動手寫個數字輸入框3:痛點——輸入法是個魔鬼》

《動手寫個數字輸入框4:魔鬼在細節——打磨光標位置》

IE的先進性

?辛辛苦苦終于控制只能輸入數字了,但只要用戶啟用了輸入法就輕松突破我們的重重包圍:-<心碎得一地都是。這是我們會想到底有沒有一個API可以禁用輸入法呢?答案是有的,但出人意料的是只有IE才支持。

?而其他瀏覽器就呵呵了。。。

別無他法只能補救~

?由于chrome、firefox等無法通過樣式ime-mode來處理,因此想到依葫蘆畫瓢,同樣在keydown事件中對特定的keyCode進行攔截過濾就好了,誰知道在輸入法中按下字符鍵時keydown事件的keyCode永遠是229。其規律為:

按字符鍵時,keydown中keyCode恒為229,且key為Undefined;而keyup中才會得到正確的keyCode,且key為正確的字符。

entershift時僅觸發keydown不會觸發keyup,而keyCode為229。
因此我們能做的是

通過keyup事件作事后補救措施;

在keydown中攔截輸入法中輸入的entershift按鍵事件,然后自行出發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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83365.html

相關文章

  • 動手寫個數字輸入3痛點——輸入是個魔鬼

    摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。因此我們能做的是通過事件作事后補救措施在中攔截輸入法中輸入的和按鍵事件,然后自行出發事件執行補救措施。 前言 ?最近在用Polymer封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷: [《動手寫個數字輸入框1:input[type=number...

    UnixAgain 評論0 收藏0
  • 動手寫個數字輸入3痛點——輸入是個魔鬼

    摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。因此我們能做的是通過事件作事后補救措施在中攔截輸入法中輸入的和按鍵事件,然后自行出發事件執行補救措施。 前言 ?最近在用Polymer封裝純數字的輸入框,開發過程中發現不是坑,也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷: [《動手寫個數字輸入框1:input[type=number...

    happen 評論0 收藏0
  • 動手寫個數字輸入1:input[type=number]的遺憾

    摘要:前言最近在用封裝純數字的輸入框,開發過程中發現不少坑,也有很多值得研究的地方。的值除了影響微調按鈕的步長外,還影響表單驗證信息。 前言 ?最近在用Polymer封裝純數字的輸入框,開發過程中發現不少坑,也有很多值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷: 《動手寫個數字輸入框1:input[type=number]的遺憾》 《動手寫個數字輸入框2:起手式——攔截非法...

    ShevaKuilin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<