input只可输入数字，IE8及以上+主流浏览器

今天处理一个表单的限制问题，然后测试说input输入框能输入数字以外的字符。当时我就表示在精神上强烈的谴责IE浏览器的各个版本。

在我测试后发现谷歌及其他浏览器都挺好的，就是IE浏览器不行，然后想着直接使用JS比较好，也不容易出现不兼容问题。

这里的代码是做了很多的改变，因为自己的项目上用的是跟其他的插件一起使用的，所以不需要现在这样麻烦。

写的不是很好，主要是一些我的个人的想法以及思路。希望能帮到大家。

使用方法很简单，下面是一些参数

1、data-cgldigits：小数位，0开始【默认值为0】

2、data-cglpone：是否支持负数 yes为支持，no为不支持【默认值为no】

3、data-cglzero：当input的值0的时候是否显示0，yes显示，no为不显示【默认值为yes】

下面是html的使用

<input type=”text” class=”cgl_inputnumber” data-cgldigits=”2″ data-cglpone=”yes” data-cglzero=”no”/>

点击demo查看效果

一、html部分

<ul class="ul">
    <li><input type="text" class="cgl_inputnumber" data-cgldigits="0" data-cglpone="yes" data-cglzero="no"/></li>
    <li><input type="text" class="cgl_inputnumber" data-cgldigits="1" data-cglpone="no"/></li>
    <li><input type="text" class="cgl_inputnumber" data-cgldigits="2" data-cglpone="yes"/></li>
    <li><input type="text" class="cgl_inputnumber" data-cgldigits="3" data-cglpone="no"/></li>
</ul>

二、css部分
<pre><style>
.ul{ width:500px; margin:0 auto;}
.ul li{ padding:10px;}
.ul li input{ display:block; width:478px; height:30px; line-height:30px; font-size:14px; padding:0 10px; border:1px solid #666;}
</style>

三、js部分

<script type="text/javascript">
$(window).ready(function(){
    (function(){
        $('.cgl_inputnumber').on('change',function(){
            // 定义空的容器
            var cgl_inputNumberVal = '';
            var cgl_inputNumberPoint = 0;
            var cgl_inputNumberNegative = '';

            // 当input的值0的时候是否显示0，默认显示
            var cgl_inputNumberZero = $(this).data('cglzero') || 'yes';
            // 定义小数点后几位数，这里直接截取，不是四舍五入
            var cgl_inputNumberDigits = $(this).data('cgldigits') || 0;
            // 是否支持负数  yes：支持   fasle：不支持
            var cgl_inputNumberPoNe = $(this).data('cglpone') || 'no';

            /*console.log(
                '小数点：' + cgl_inputNumberDigits + '\n' +
                '正负数：' + cgl_inputNumberPoNe + '\n' +
                '0显示：' + cgl_inputNumberZero)*/

            // 找到input的值
            var cgl_inputNumberValReal = $(this).val();
            // 对input里面的数字进行循环查询
            for (var i = 0; i < cgl_inputNumberValReal.length; i++) {
                // 求每个字的charCodeAt值
                var cgl_inputNumberValRealCode = cgl_inputNumberValReal.charCodeAt(i);
                if (cgl_inputNumberValReal.charCodeAt(0) == 45 && cgl_inputNumberPoNe == 'yes'){
                    cgl_inputNumberNegative = '-'
                }else{
                    cgl_inputNumberNegative = ''
                }
                // 对每个字进行判断，0-9+.
                if (47 < cgl_inputNumberValRealCode && cgl_inputNumberValRealCode < 58 ){
                    cgl_inputNumberVal+=cgl_inputNumberValReal[i]
                }else if (cgl_inputNumberValRealCode == 46){
                    //开始对 . 进行判断只留一个，这里留下第一个
                    cgl_inputNumberPoint ++;
                    if( cgl_inputNumberPoint == 1){
                        cgl_inputNumberVal+=cgl_inputNumberValReal[i]
                    }else{
                        //第二次的 . 不执行
                    };
                }else{
                    // 只可输入数字，略过其他字符
                };
            };
            // 计算小数位数
            cgl_inputNumberVal = Math.floor(cgl_inputNumberVal * (Math.pow(10,cgl_inputNumberDigits))) / ((Math.pow(10,cgl_inputNumberDigits)));
            // 给input赋值
            if (cgl_inputNumberVal == 0){
                // 控制显示0的时候
                if(cgl_inputNumberZero == 'yes'){
                    $(this).val('0');
                }else{
                    $(this).val('');
                }
            }else{
                $(this).val(cgl_inputNumberNegative + cgl_inputNumberVal);
            }
        });
    }())
});
</script>