input只可輸入數字，IE8及以上+主流瀏覽器

今天處理一個表單的限制問題，而後測試說input輸入框能輸入數字之外的字符。當時我就表示在精神上強烈的譴責IE瀏覽器的各個版本。

在我測試後發現谷歌及其餘瀏覽器都挺好的，就是IE瀏覽器不行，而後想着直接使用JS比較好，也不容易出現不兼容問題。

這裏的代碼是作了不少的改變，由於本身的項目上用的是跟其餘的插件一塊兒使用的，因此不須要如今這樣麻煩。

寫的不是很好，主要是一些個人我的的想法以及思路。但願能幫到你們。

使用方法很簡單，下面是一些參數

一、data-cgldigits：小數位，0開始【默認值爲0】

二、data-cglpone：是否支持負數 yes爲支持，no爲不支持【默認值爲no】

三、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查看效果

1、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>

2、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>

3、js部分

<script type="text/javascript">
$(window).ready(function(){（www.gendan.com）
(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>