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 = el.getAttribute("data-numbers") || 15, // 最大小数长度 dl = 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 == 188*/ || // 数字键盘上的 ".", "," key == 110/*|| key == 109*/) && // 允许输入小数 dl > 0) { if ( // 未输入".", 且输入的位置后面的小数位数未达到上限 dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) || // 输过".", 且选中部分文本包含"." dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end) return; } return false; } // 验证输入的值 function validateValue(dotIndex, val, rLeft, rRight, nl, dl) { 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); 结尾这个方法虽然有些地方效率还不够高，而且某些键盘key的还未处理，也不排除某些情况下可能失效，但是对于大多数情况下使用已经足够了。大家若有额外需要请自行修改，当然有更好的办法也请分享(*^__^*) over PS:01.18更新了一些keyCode的判断,以及错把110写成109≡(▔﹏▔)≡ 另外需要注意：对于使用右键菜单或者是菜单栏粘贴进来的需要额外处理；还有一种极端的情况：在网页中选中文字并拖动到文本框内，或者是在文本框中选中文字并拖动，这都需要做额外处理对于以上两种需要额外处理的情况，比较便捷的方法是加一个验证，比如jQuery.validate之类的表单验证，否则处理起来比较麻烦再PS：在win8下，切换到微软拼音可能会造成无法输入，不知道其他系统或者其他输入法有没有这个问题( *_*) (`~~`) ====

　　推荐阅读

　　jquery简单瀑布流实现原理及ie8下测试代码

测试环境：ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C/>>>详细阅读

本文标题：javascript限制文本框只允许输入数字(曾经与现在的方法对比)

地址：http://www.17bianji.com/kaifa2/JS/22486.html

1/2 1