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

Question

I have JS code for checking number input

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:

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

Now if switch to HTML5, and use input type=number , the same is not working in IE .how should I support it in IE.

Answer 1

PolyFills are created to address some browser[Specially IE] issues on supporting some features/tags they don't cover. One for each feature. For example you need HTML5Shiv(shim) to add css3 styling support to IE, Fabric.js for rendering SVG via HTML5 canvas, & etc.

Modernizr has aggregated most of them under an all-in-one library.

But after all, even with this in mind, you have 2 options to solve these kinda issues.

1. Fill the shortage of browser on the feature by Polyfills.
2. Stick with JavaScript for fulfilling what you need.

For this particular case, I prefer the latest solution.

I recommend you sticking with FormValidator jQuery Library for a consistent, complete & easy-to-use solution form validation across all browsers.

Answer 2

My first observation is that you should try writing unobtrusive JavaScript. This simply means separate HTML from JavaScript. Secondly, try this method which checks for existence of DOM Level 2 method on the element passed in. If it exists, it is used, passing in the event type, event handler function and false (to indicate the bubbling phase). If the IE method is available, it is used as a second option. The event type must be prefixed with 'on' in order for it to work in IE 8 and earlier. The last resort is to use DOM Level 0 method (code should never reach here in modern browsers).

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);