三生石@ 2009-01-22 14:36 采纳率: 100%
浏览 374
已采纳

Html 文本输入只允许数字输入

Is there a quick way to set an HTML text input (<input type=text />) to only allow numeric keystrokes (plus '.')?

转载于:https://stackoverflow.com/questions/469357/html-text-input-allows-only-numeric-input

  • 写回答

29条回答 默认 最新

  • 妄徒之命 2012-12-12 04:47
    关注

    JavaScript (the most reliable still)

    While this is simple, it will not let you use combination keys and other non-typeable keys. For a complete JavaScript solution that also supports input of type number and max length validation, consider using this Polyfill.

    HTML 5 with <!DOCTYPE html> has native solution:

    <input type="number">

    Beware that it does not behave in a standard way in some browsers.

    Try input type=number to see the HTML5 version in action.

    See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.

    jQuery

    $(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl/cmd+A
            (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+C
            (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+X
            (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

    More complex validation options

    If you want to do some other validation bits and pieces, this could be handy:

    http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input

    But don't forget you still must do server side validation!

    for AZERTY keyboard:

    jQuery

    // Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+C
    (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+X
    (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39) ||
    //Allow numbers and numbers + shift key
    ((e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105))) {
    // let it happen, don't do anything
    return;
}
// Ensure that it is a number and stop the keypress
if ((!e.shiftKey && (e.keyCode < 48 || e.keyCode > 57)) || (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(28条)

报告相同问题？

悬赏问题

  • ¥15 如何获取烟草零售终端数据
  • ¥15 数学建模招标中位数问题
  • ¥15 phython路径名过长报错 不知道什么问题
  • ¥15 深度学习中模型转换该怎么实现
  • ¥15 HLs设计手写数字识别程序编译通不过
  • ¥15 Stata外部命令安装问题求帮助！
  • ¥15 从键盘随机输入A-H中的一串字符串，用七段数码管方法进行绘制。提交代码及运行截图。
  • ¥15 TYPCE母转母，插入认方向
  • ¥15 如何用python向钉钉机器人发送可以放大的图片？
  • ¥15 matlab（相关搜索：紧聚焦）