使用Javascript限制文本框只允许输入数字

很多时候需要用到限制文本框的数字输入，试过许多方法，都不太理想，遂决定自己实现一个来玩玩。

曾经使用过的方法

通过onkeydown事件来控制只允许数字：

<input onkeydown="return event.keyCode>=48&&event.keyCode<=57||event.keyCode>=96&&event.keyCode<=105" />

通过jQuery插件Masked Input：http://digitalbush.com/projects/masked-input-plugin/

通过jQuery插件MeioMask：https://github.com/fabiomcosta/jquery-meiomask

onkeydown事件控制起来相对比较麻烦，上面的简化版很多键都没有涉及到，操作体验比较糟糕。

jQuery的两个插件使用起来还是比较灵活的，能够满足大部分需要，但是在控制输入长度上限制的很不灵活(或许是我没有发现灵活的使用方式？)

具体实现方法

使用maskedInput里的一部分方法来提取光标位置

使用stackoverflow上提供的通用方法来处理键盘的敲击：http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input

更新：参考http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes上列出的keycode

然后再自定义两个属性来设置输入的数字、小数长度：

• data-numbers控制数字输入的长度
• data-decimals控制小数输入的长度

最终全部代码实现如下：

  function validateDigitsOnly(evt) {
      var e = evt || window.event,
        key = e.keyCode || e.which;

      if (
        // Backspace, Tab, Enter, Esc, Delete
        key == 8 || key == 9 || key == 13 || key == 27 || key == 46 ||
        // Ctrl + A
        (key == 65 && event.ctrlKey === true) ||
        // Home, End, 四个方向键
        key >= 35 && key <= 40) {
          return;
      }

      if (e.shiftKey || e.altKey || e.ctrlKey) {
        return false;
      }
      
      var el = e.target || e.srcElement,
        // 最大数字长度
        nl = parseInt(el.getAttribute("data-numbers")) || 15,
        // 最大小数长度
        dl = parseInt(el.getAttribute("data-decimals")) || 2,        
        val = el.value,
        // "." 位置
        dotIndex = val.indexOf("."),
        rng = caret.call(el),
        // 光标在"."左边
        rLeft = rng.end <= dotIndex,
        // 光标在"."右边
        rRight = rng.begin > dotIndex;
        
      if (
        // 数字   
        key >= 48 && key <= 57 ||
        // 数字键盘输入的数字
        key >= 96 && key <= 105) {
        if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
          return;
        
        // 选中部分文本再做一次处理
        val = val.substring(0, rng.begin) + val.substring(rng.end);
        dotIndex = val.indexOf(".");
        if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
          return;
      }
      else if (
        // "."
        (key == 190 ||
        // 数字键盘上的 "."
        key == 110) &&
        // 允许输入小数
        dl > 0) {        
        if (
          // 未输入".", 且输入的位置后面的小数位数未达到上限
          dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) ||
          // 输过".", 且选中部分文本包含"."
          dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end)
          return;
      }
      else if (
        // "-"
        (key == 189 || 
        // 数字键盘上的 "-"
        key == 109) &&
        // 光标在开始位置
        (rng.begin == 0 && 
        // 未输入过"-"负号 或者 选中了开头一段文本
        (val[0] != "-" || rng.end > rng.begin))) {
        return;
      }

      return false;
  }
  
  // 验证输入的值
  function validateValue(dotIndex, val, rLeft, rRight, nl, dl) {
    if (val[0] == "-") nl = nl + 1;//负号开头多加一位
    if (
      // 未输入过"."
      dotIndex == -1 && val.length < nl ||
      // 光标位置在"."之前
      rLeft && val.substring(0, dotIndex).length < nl ||
      // 光标在"."之后且未达到小数上限
      rRight && val.substring(dotIndex + 1).length < dl)
      return true;
    return false;
  }
  
  // 获取光标位置
  function caret() {
    var begin, end;
    if (this.setSelectionRange) {
      begin = this.selectionStart;
      end = this.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
      var range = document.selection.createRange();
      begin = 0 - range.duplicate().moveStart('character', -100000);
      end = begin + range.text.length;
    }
    return { begin: begin, end: end };
	}

 

使用方法

具体使用方法如下：

<input type="text" id="t1" />
<input type="text" id="t2" data-numbers="5" data-decimals="4" />
<script>
	document.getElementById("t1").onkeydown = validateDigitsOnly;
	document.getElementById("t2").onkeydown = validateDigitsOnly;
</script>

或者干脆写在html里：

<input type="text" id="lwme_text_3" onkeydown="return validateDigitsOnly(event)" />

如果引入jQuery的话使用起来就更加简单了：

<input type="text" class="digitsOnly" />

$(".digitsOnly").keydown(validateDigitsOnly);

一些需要额外处理的情况

对于使用右键菜单或者是菜单栏粘贴进来的需要额外处理；

有方法是直接访问clipboardData来修改剪切板数据，但是可能会受权限困扰； 所以干脆直接通过onpaste事件来禁止粘贴比如：

document.getElementById("lwme_text_1").onpaste=function(){return false;};

此外还有oncut,oncopy来禁止剪切、粘贴

若只是单单禁用右键菜单，可以使用onmousedown方法：

    document.getElementById("lwme_text_1").onmousedown=function(e){
      if (e.button && e.button == 2 ||
        e.which && e.which == 3)
        return false;
    };

还有一种极端的情况：在网页中选中文字并拖动到文本框内，或者是在文本框中选中文字并拖动，这都需要做额外处理

一种办法是直接阻止body的ondragstart事件(体验不是很好)：

    document.body.ondragstart=function(){return false;};

直接加在body上用户体验不是很好，所以这种办法不太可取，不过用来禁止文本框内的选中内容拖动还是比较不错的办法：

    document.getElementById("lwme_text_1").ondragstart=function(){return false;};

更好一点的办法是在oninput事件里处理(ie6-8为onpropertychange事件)，这样用户基本感觉不到文字闪动：

    document.getElementById("lwme_text_1").oninput=function(){
      if(isNaN(this.value))
        this.value = parseFloat(this.value) || "";
    };
    
    // ie 6-8
    document.getElementById("lwme_text_1").onpropertychange=function(){
      if(isNaN(this.value))
        this.value = parseFloat(this.value) || "";
    };

这个方法也可以用于处理粘贴的文本

在win8下，切换到微软拼音可能会造成无法输入，不知道其他系统或者其他输入法有没有这个问题(`~~`)

解决办法是通过样式style="ime-mode:disabled"来禁用输入法，chrome浏览器不支持这个样式则直接使用input type=number来控制

表单验证还是必须品

使用了以上的方法，基本上能解决大部分出现的问题，但是为了防止未知情况的影响，还是有必要加上jQuery.validate之类的表单验证来提供更多保障

结尾

这个方法虽然有些地方效率还不够高，而且某些键盘key的还未处理，也不排除某些情况下可能失效，但是对于大多数情况下使用已经足够了。

大家若有额外需要请自行修改，当然有更好的办法也请分享(*^__^*)

PS:01.18更新了一些keyCode的判断,以及错把110写成109≡(▔﹏▔)≡

PS:感谢评论的各位提供的方法

放到github以后慢慢完善

over