新建指令避开 Avalon 的 ms-duplex 的题目

前端框架 Avalon 有一个题目,即 在运用 ms-duplex 后,此 input 在 Windows 8.1 的 IE11 下没法一般运用输入法输入中文,这个题目在 Avalon 1.5.X 中一向存在且被复现。

既然没法直接修复,那末就运用 avalon.directive 自定义一个新的指令来简朴地处置惩罚双向数据绑定。起名为 ms-model,名字来源于 Angular.

完成以下:

avalon.directive("model", {
    init: function (binding) {
        // binding 为指令初始化时注入对象.
        init(binding)();
    },

    // 此要领相似 Get / Set, 在掌握器运用 $watch 看管 (binding.expr, 即 ms-model="expr") 时触发, 可在此做一些杂七杂八的事变.
    update: function (newVal, oldVal) {
        // this 为 init 中的 bingding 对象.
        this.element.value = newVal;
    }
});


// Definition: ms-model.
function init (binding) {

    var thisElement = binding.element;  // 指令地点的节点.
    var directiveValue = binding.expr;  // 指令绑定的属性.
    var imeIgnored = false;  // 输入法疏忽掌握标识.

    // 初始化赋值. 必需推入使命行列才见效.
    setTimeout(function () {
        thisElement.value = binding.oldValue !== undefined ? binding.oldValue : "";  // 未赋值举行清空, 防备 IE / Edge 缓存.
    }, 1);

    // Definition: Input 事宜.
    var inputEvent = function (event) {
        if (imeIgnored) { return; }
        // vmodels 是指令地点的掌握器的数组, 看起来是根据 [孙, 子, 父] 的冒泡递次排序, 但未一定.
        // ms-duplex 只处置惩罚了指令地点的近来的掌握器的数值, 在此也只处置惩罚 vmodels[0].
        eval('binding.vmodels[0].' + directiveValue + ' = thisElement.value;');   // 运用 eval 处理多层嵌套题目.
    };


    return function () {
        // 在运用输入法的时刻不举行数据同步.
        // 进入输入法状况时锁定掌握标识.
        avalon.bind(thisElement, "compositionstart", function () {
            imeIgnored = true;
        });

        // 输入法恢复时开释掌握标识.
        avalon.bind(thisElement, "compositionend", function () {
            imeIgnored = false;
            inputEvent();  // Fixing for Edge, Edge 的日语输入法的 input 事宜在 compositionend 之前实行, 而其他浏览器包含 IE11 满是 compositionend 以后, 须要手动触发一次.
        });

        // 设置 Input 事宜.
        avalon.bind(thisElement, "input", inputEvent, false);

        // 修复 IE 题目.
        if (window.ScriptEngine && window.ScriptEngine()) {

            // 修复 IE9 的 Backspace / Delete 剪切不触发 Input 事宜的题目.
            if (navigator.appVersion.indexOf("MSIE 9.0") > -1) {
                avalon.bind(thisElement, "cut", function () {
                    setTimeout(inputEvent, 1);  // 必需推入使命行列中实行才见效.
                });
            }

            // IE 分外注册 KeyUp 举行数据绑定来防止输入法无效的题目.
            avalon.bind(thisElement, "keyup", function (event) {
                event = event || window.event;
                if (event.keyCode === 17 || event.keyCode === 18 || event.ctrlKey || event.shiftKey || event.altKey) { return; }
                inputEvent();
            });

        }
    }
}
    原文作者:LancerComet
    原文地址: https://segmentfault.com/a/1190000005362826
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞