兼容IE7、IE8、IE9的input type="number"插件

最新推荐文章于 2024-06-23 09:05:04 发布

樊小书生

最新推荐文章于 2024-06-23 09:05:04 发布

阅读量8.3k

点赞数

分类专栏： jQuery JavaScript 文章标签： ie7 ie 8 ie 9 number input

本文链接：https://blog.csdn.net/fxss5201/article/details/55684067

版权

JavaScript 同时被 2 个专栏收录

86 篇文章 1 订阅

订阅专栏

jQuery

21 篇文章 0 订阅

订阅专栏

IE11版本好像才兼容input type=”number”，但是现在Win7版本操作系统下，很多人的IE版本都是IE7/8/9，所以为了体验就自己写了一个小插件，支持设置最大值、最小值、数字间隔。大家可以试着用一下，如果有哪些Bug欢迎指出，后期修改。

用法说明

1、首先必须引入jQuery（由于我是用的是1.11.3版本，如果其他版本有问题欢迎指出、后期修改）
2、在所有代码最后引入inputNumber.css和inputNumber.js文件，如：

<!--[if IE]>
    <link rel="stylesheet" href="css/inputNumber.css">
    <script src="js/inputNumber.js"></script>
<![endif]-->

3、支持设置最大值、最小值、数字间隔
4、引用的时候请注意路径问题
下面是一个例子（此处仅贴出html代码，至于css、js文件可在之后的下载位置进行下载）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Firefox和IE对input number的兼容</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        * {margin: 0;padding: 0;}
        .input-style{width: 150px;height: 20px;}
    </style>
</head>
<body>
<div class="inputNumber-relative">
    <input class="input-style" type="number" name="number" id="inputNumber" min="5" max="55" step="3">
</div>
<!--[if IE]>
    <link rel="stylesheet" href="css/inputNumber.css">
    <script src="js/inputNumber.js"></script>
<![endif]-->
<script>
/**
 * IE低版本和Firefox对input type="number"的兼容（因为Firefox中input type="number"依然可以输入非数字内容）
 * 可按的按键包括数字（键盘上字母上的数字和小键盘中的数字）、删除键、Tab切换键、减号按键、小数点键
 */
$("#inputNumber").on("keydown", function (event) {
    var event = event.which ? event.which : window.event.keyCode;
    if (event == 8 || event == 9 || event == 109 || event == 110 || (event >= 48 && event <= 57) || (event >= 96 && event <= 105)) {
        return true;
    } else {
        return false;
    }
});
</script>
</body>
</html>