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

来源：互联网发布：mac pro 显卡升级编辑：程序博客网时间：2024/05/16 15:18

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>

实现的效果如下（在IE9下面上下键的点击、滚轮滚动增减值都支持，在IE7/8下面仅支持上下点击事件）：
这里写图片描述
所有文件的下载地址：http://download.csdn.net/download/fxss5201/9757758

0 0