IE中的HTML5輸入類型編號支持

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

創建PolyFill是為了解決一些瀏覽器[特別是IE]關於支持它們未涵蓋的功能/標簽的問題。 每個功能一個。 例如，你需要HTML5Shiv（shim）來為IE添加css3樣式支持，Fabric.js用於通過HTML5 canvas等渲染SVG。

Modernizr在一體化圖書館中聚集了大部分。

但畢竟，即使考慮到這一點，你有兩個選擇來解決這些問題。

1. Polyfills填補了該功能的瀏覽器短缺。
2. 堅持使用JavaScript來實現您的需求。

對於這種特殊情況，我更喜歡最新的解決方案。

我建議您堅持使用FormValidator jQuery Library，以便在所有瀏覽器中進行一致，完整且易於使用的解決方案表單驗證。

Answer 2

我的第一個觀察是你應該嘗試編寫不引人注目的JavaScript。 這僅僅意味着將JavaScript與JavaScript分開。 其次，嘗試使用此方法檢查傳入的元素是否存在DOM Level 2方法。如果存在，則使用它，傳入事件類型，事件處理函數和false（表示冒泡階段）。 如果IE方法可用，則將其用作第二個選項。 事件類型必須以“on”為前綴，以便在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);