Question

我有用于检查号码输入的JS代码

function isNumberKey(evt) {

    var charCode = (evt.which) ? evt.which : evt.keyCode;
    // Added to allow decimal, period, or delete
    if ( charCode == 190 || charCode == 46 || charCode == 45 || charCode == 32 || charCode == 43) 
        return true;

    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
        return false;

    return true;
}

Html输入：

<input class="input_txt1" type="text" 
       placeholder="Client Postal Code"         
       onkeypress="return isNumberKey(event)" id="ZCHADR5">

现在如果切换到HTML5，并使用输入type=number，那么在IE中也是如此。我应该如何在IE中支持它。

Answer 1

创建

PolyFills是为了解决一些浏览器[特别是IE]关于支持他们无法涵盖的功能/标签的问题。每个功能一个。例如，你需要HTML5Shiv（shim）来为IE添加css3样式支持，Fabric.js用于通过HTML5画布渲染SVG，＆amp;等

Modernizr已将大部分内容汇总在一体化库中。

但毕竟，即使考虑到这一点，你有两个选择来解决这些问题。

通过Polyfills填写该功能的浏览器短缺。
坚持使用JavaScript来实现您的需求。

对于这种特殊情况，我更喜欢最新的解决方案。

我建议您坚持使用FormValidator jQuery Library，以获得一致，完整和完整的功能。所有浏览器都提供易于使用的解决方案表单验证。

Answer 2

我的第一个观察是你应该尝试编写不引人注目的JavaScript。这仅仅意味着将JavaScript与JavaScript分开。其次，尝试使用此方法检查传入的元素上是否存在DOM Level 2方法。如果存在，它被使用，传入事件类型，事件处理函数和false（表示冒泡阶段）。如果IE方法可用，则将其用作第二个选项。事件类型必须以＆＃39; on＆＃39;为前缀。为了它可以在IE 8及更早版本中使用。最后一种方法是使用DOM Level 0方法（在现代浏览器中代码永远不会到达此处）。

var appEvents = (function() {
    'use strict';
    var instance;

    function init() {

        return {
            addHandler: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent('on' + type, handler);
                } else {
                    element['on' + type] = handler;
                }
            },
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detatchEvent) {
                    element.detatchEvent('on' + type, handler);
                } else {
                    element['on' + type] = null;
                }
            },
        };
    }

    return {
        getInstance: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
})();

var appEventsInstance = appEvents.getInstance();
var input = document.querySelector('#ZCHADR5');
var handler = function(event) {
   // define event
}
// call addHandler
appEventsInstance.addHandler(input, 'onkeypress', handler);

IE中的HTML5输入类型编号支持

2 个答案: