关于javascript：HTML文本输入仅允许数字输入


HTML text input allow only numeric input

有没有快速的方法来设置HTML文本输入()只允许数字键击(加上'。')？

相关讨论

注意：这是一个更新的答案。下面的评论是指使用密钥代码搞乱的旧版本。

JavaScript的

下面的setInputFilter函数允许您在文本上使用任何类型的输入过滤器，包括各种数字过滤器(见下文)。

与大多数其他解决方案不同，这正确支持复制+粘贴，拖放，所有键盘快捷键，所有上下文菜单操作，所有不可键入的键(例如光标和导航键)，插入符号位置，所有语言和平台的所有键盘布局，以及IE 9以来的所有浏览器。

在JSFiddle上自己尝试一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input","keydown","keyup","mousedown","mouseup","select","contextmenu","drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

您可能想要使用的一些输入过滤器：

  • 整数值(仅限正数)：
    /^\d*$/.test(value)
  • 整数值(正数且达到特定限制)：
    /^\d*$/.test(value) && (value ==="" || parseInt(value) <= 500)
  • 整数值(正面和负面)：
    /^-?\d*$/.test(value)
  • 浮点值(允许.和,作为小数分隔符)：
    /^-?\d*[.,]?\d*$/.test(value)
  • 货币值(即最多两位小数)：
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • 仅限A-Z(即基本拉丁字母)：
    /^[a-z]*$/i.test(value)
  • 仅限拉丁字母(即英语和大多数欧洲语言，有关Unicode字符范围的详细信息，请参阅https://unicode-table.com)：
    /^[a-z\u00c0-\u024f]*$/i.test(value)
  • 十六进制值：
    /^[0-9a-f]*$/i.test(value)

请注意，您仍然必须进行服务器端验证！

jQuery的

还有一个jQuery版本。请参阅此答案或在JSFiddle上自行尝试。

HTML 5

HTML 5具有的本机解决方案(请参阅规范)，但请注意，浏览器支持各不相同：

  • 大多数浏览器仅在提交表单时验证输入，而不是在输入时验证。
  • 大多数移动浏览器不支持step，min和max属性。
  • Chrome(版本71.0.3578.98)仍允许用户在字段中输入字符e和e。另见这个问题。
  • Firefox(版本64.0)和Edge(EdgeHTML版本17.17134)仍然允许用户在该字段中输入任何文本。

在w3schools.com上亲自尝试一下。

相关讨论

使用这个DOM

1
<input type='text' onkeypress='validate(event)' />

而这个脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
相关讨论

我一直在努力寻找一个很好的答案，我们迫切需要，但是缺少这些，这两个是我能想到的最简洁的方法：

1
2
<input type="text"
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

如果您不喜欢在删除之前显示一秒钟的未接受字符，则下面的方法是我的解决方案。请注意许多其他条件，这是为了避免禁用各种导航和热键。如果有人知道如何使这个变得紧凑，请告诉我们！

1
2
3
4
5
6
7
<input type="text"
onkeydown="return ( event.ctrlKey || event.altKey
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9)
                    || (event.keyCode>34 && event.keyCode<40)
                    || (event.keyCode==46) )">
相关讨论

这是一个简单的，只允许一个十进制，但不多：

1
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

相关讨论

还有一个例子，对我很有用：

1
2
3
4
5
6
7
8
9
10
function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

也附加到按键事件

1
2
3
$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

和HTML：

1
<input type="input" id="edit1" value="0" size="5" maxlength="5" />

这是一个jsFiddle示例

相关讨论

HTML5有，听起来不错。目前，只有Opera本机支持它，但有一个项目具有JavaScript实现。

相关讨论

这里的大多数答案都有使用键事件的弱点。

许多答案会限制您使用键盘宏进行文本选择，复制+粘贴以及更多不需要的行为的能力，其他答案似乎依赖于特定的jQuery插件，这会使用机器枪来杀死苍蝇。

无论输入机制如何(键击，复制+粘贴，右键复制+粘贴，语音到文本等)，这个简单的解决方案对我来说似乎对跨平台最有效。所有文本选择键盘宏仍然可以工作，它甚至会限制通过脚本设置非数字值的能力。

1
2
3
4
function forceNumeric(){
    this.value(this.value.replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input.numeric-text', forceNumeric);
相关讨论

我选择使用这里提到的两个答案的组合，即

和

1
2
3
4
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

相关讨论

HTML5支持正则表达式，因此您可以使用：

1
<input id="numbersOnly" pattern="[0-9.]+" type="text">

警告：某些浏览器尚不支持此功能。

相关讨论

JavaScript的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers  
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

另外你可以添加逗号，句号和减号(，.-)

1
2
  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

1
<input type="text" onkeydown="validateNumber(event);"/ >
相关讨论

2解决方案：

使用表单验证器(例如使用jQuery验证插件)

使用正则表达式在输入字段的onblur(即用户离开字段时)事件期间进行检查：

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value ="";
    }
}



<input type="text" ... onblur="testField(this);"/>
相关讨论

很简单....

//在JavaScript函数中(可以使用HTML或PHP)。

1
2
3
4
5
6
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

在您的表单输入中：

1
<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

输入最大值(以上这些允许12位数字)

相关讨论

更安全的方法是检查输入的值，而不是劫持按键并尝试过滤keyCodes。

这样用户可以自由使用键盘箭头，修改键，退格键，删除键，使用非标准键盘，使用鼠标粘贴，使用拖放文本，甚至使用辅助功能输入。

以下脚本允许正数和负数

1
2
3
4
5
6
7
8
1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

1
2
3
4
5
6
7
8
9
10
11
12
var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
1
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

编辑：我删除了我的旧答案，因为我认为现在已经过时了。

相关讨论

请找下面提到的解决方案。在此用户中只能输入numeric值，用户也无法输入copy，paste，drag和drop。

Allowed Characters

1
0,1,2,3,4,5,6,7,8,9

Not allowed Characters and Characters through events

  • 字母值
  • 特殊字符
  • 复制
  • 糊
  • 拖动
  • 下降

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });    
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
1
2
3
4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

如果它不起作用，请告诉我。

您可以使用模式：

1
<input id="numbers" pattern="[0-9.]+" type="number">

在这里您可以看到完整的移动网站界面提示。

相关讨论

如果您想在alpha或数字之间向设备(可能是手机)建议，可以使用。

JavaScript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML代码：

1
<input type='text' name='price' value='0' onkeypress='validate(event)'/>

完美的工作，因为退格键代码是8，正则表达式不允许它，所以这是一个绕过错误的简单方法:)

使用jQuery和replace()而不是查看event.keyCode或event.which的简短而甜蜜的实现：

1
2
3
$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

键入的字母暂时出现的小副作用和CTRL / CMD + A似乎表现得有点奇怪。

只是使用jQuery的另一个变种

1
2
3
$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

input type="number"是HTML5属性。

在另一种情况下，这将帮助您：

1
2
3
4
5
6
7
8
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
相关讨论

还有一个例子，您只能在输入字段中添加数字，而不能使用字母

1
<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

现在使用type ="number"这个属性支持大多数浏览器

1
<input type="number" maxlength="3" ng-bind="first">
相关讨论

1
2
3
4
5
6
<input name="amount" type="text" value="Only number in here"/>


    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });

您还可以将输入值(默认情况下视为字符串)与强制为数字的自身进行比较，如：

1
2
3
if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

但是，您需要将其绑定到keyup等事件。

相关讨论

这是一个改进的功能：

1
2
3
4
5
6
7
8
function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

使用此DOM：

1
<input type ="text" onkeydown ="validate(event)"/>

这个脚本：

1
2
3
4
5
6
7
8
validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

...或者这个没有indexOf的脚本，使用两个for的...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
validate = function(evt)
{
    var CharValidate = new Array("08","046","039","948","235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

我使用了onkeydown属性而不是onkeypress，因为在onkeypress属性之前检查了onkeydown属性。问题出在Google Chrome浏览器中。

使用属性"onkeypress"，TAB将无法在Google Chrome上使用"preventDefault"进行控制，但是，使用属性"onkeydown"，TAB变得可控！

TAB的ASCII代码=> 9

第一个脚本的代码少于第二个脚本，但ASCII字符数组必须包含所有键。

第二个脚本比第一个脚本大得多，但是数组不需要所有键。数组每个位置的第一个数字是每个位置的读取次数。对于每个读数，将增加1到下一个。例如：










NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57










在数字键只有10(0 - 9)的情况下，如果它们是1百万，那么创建一个包含所有这些键的数组是没有意义的。

ASCII码：

  • 8 ==>(退格);
  • 46 =>(删除);
  • 37 =>(左箭头);
  • 39 =>(右箭头);
  • 48 - 57 =>(数字);
  • 36 =>(家);
  • 35 =>(结束);

最好的方法(允许所有类型的数字 - 真正的负数，真正的正数，iinteger负数，整数正数)是：

1
2
3
4
5
6
7
8
9
10
11
12
13
$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) ||
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
});

我的解决方案提供更好的用户体验：

HTML

1
<input type="tel">

jQuery

1
2
3
4
5
6
7
$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

细节：

首先，输入类型：

number显示缩小实际输入空间的向上/向下箭头，我觉得它们很难看，只有在数字表示数量时才会有用(电话，区号，ID ......不需要它们)
tel提供类似的浏览器数字验证，不带箭头

使用[number / tel]也有助于在移动设备上显示数字键盘。

对于JS验证，我最终需要2个函数，一个用于普通用户输入(按键)，另一个用于复制+粘贴修复(更改)，其他组合会给我带来糟糕的用户体验。

我使用更可靠的KeyboardEvent.key而不是现在弃用的KeyboardEvent.charCode

根据您的浏览器支持，您可以考虑使用Array.prototype.includes()而不是命名不佳的Array.prototype.indexOf()(对于true / false结果)

相关讨论

解决此问题的一种简单方法是实现jQuery函数以使用正则表达式验证在文本框中键入的字符，例如：

你的HTML代码：

1
<input class="integerInput" type="text">

而js函数使用jQuery

1
2
3
4
5
6
7
$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

1
2
3
4
5
6
7
$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
           
        });
    });
1
2
3
4
5
6
7
<script
              src="https://code.jquery.com/jquery-2.2.4.min.js"
              integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
              crossorigin="anonymous">


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

这是geowa4解决方案的扩展版本。支持min和max属性。如果数字超出范围，将显示先前的值。

你可以在这里测试一下。

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }  
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
       "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
       "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
       "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }      
    });    
});

如果输入是动态的，请使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    });
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    });
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());        
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    });
});
相关讨论

为输入字段提供一个类()并使用如下的jquery。

1
2
3
jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

上面的代码也可用于禁用Ctrl+V笔划和right click笔划中的特殊字符。

下面的代码也将检查PASTE事件
取消注释"ruleSetArr_4"并将(concate)添加到"ruleSetArr"以允许FLOAT编号。
轻松复制/粘贴功能。用参数中的输入元素调用它
示例：inputIntTypeOnly($('input[name="inputName"]'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function inputIntTypeOnly(elm){
    elm.on("keydown",function(event){
        var e = event || window.event,
            key = e.keyCode || e.which,
            ruleSetArr_1 = [8,9,46], // backspace,tab,delete
            ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57], // top keyboard num keys
            ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
            ruleSetArr_4 = [17,67,86],  // Ctrl & V
          //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
            ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4);   // merge arrays of keys
       
            if(ruleSetArr.indexOf() !=="undefined"){    // check if browser supports indexOf() : IE8 and earlier
                var retRes = ruleSetArr.indexOf(key);
            } else {
                var retRes = $.inArray(key,ruleSetArr);
            };
            if(retRes == -1){   // if returned key not found in array, return false
                return false;
            } else if(key == 67 || key == 86){  // account for paste events
                event.stopPropagation();
            };

    }).on('paste',function(event){
        var $thisObj = $(this),
            origVal = $thisObj.val(),   // orig value
            newVal = event.originalEvent.clipboardData.getData('Text'); // paste clipboard value
        if(newVal.replace(/\D+/g, '') ==""){    // if paste value is not a number, insert orig value and ret false
            $thisObj.val(origVal);
            return false;
        } else {
            $thisObj.val(newVal.replace(/\D+/g, ''));
            return false;
        };
       
    });
};

var inptElm = $('input[name="inputName"]');

inputIntTypeOnly(inptElm);
1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<input type="text" name="inputName" value="1">

这是一个简单的解决方案

将.price-input input.quantity替换为输入feild的类

1
2
3
4
5
6
$(".price-input input.quantity").on("keypress keyup blur",function (event) {    
       $(this).val($(this).val().replace(/[^\d].+/,""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });
相关讨论

这是我喜欢使用的一个很好的简单解决方案：

1
2
3
4
5
6
function numeric_only (event, input) {
    if ((event.which < 32) || (event.which > 126)) return true;
    return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;

<input type="text" onkeypress="return numeric_only (event, this);" />

说明：

使用"event.which" - 首先确定它是否是可打印的字符。如果不是那么允许它(对于删除和退格之类的东西)。否则，将字符连接到字符串的末尾，并使用jQuery"isNumeric"函数对其进行测试。这使得所有单调乏味的测试每个单独的角色，也适用于剪切/粘贴场景。

如果你想变得非常可爱，那么你可以创建一个新的HTML输入类型。我们称之为"数字"，以便您可以拥有标记：

1
<input type="numeric" />

这只会允许数字字符。只需添加以下"document.ready"命令：

1
2
3
4
5
6
$(document).ready (function () {
    $("input[type=numeric]").keypress (function (event) {
        if ((event.which < 32) || (event.which > 126)) return true;
        return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
    });// numeric.keypress;
});// document.ready;

HTML不关心你使用什么类型的名称 - 如果它不能识别它，那么它默认会使用文本框，所以你可以这样做。你的编辑可能会抱怨，但是，嘿，这是它的问题。毫无疑问，清教徒会惊慌失措，但它很有效，很容易，到目前为止它对我来说非常强大。

我使用你可以从NuGet下载的jquery.inputmask.js库。
更具体地说，我使用它附带的jquery.inputmask.regex.extensions.js。

我给input元素一个类，在本例中是reg：

1
<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>

然后在JavaScript中我设置了掩码：

1
2
var regexDigitsOnly ="^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

这仅适用于数字，但您可以更改正则表达式以接受"。"。

通过使用它，不可能输入不是数字的字符。
将这些输入掩码库用于一般格式化很有用。

相关讨论

记住区域差异(欧元以与美国人相反的方式使用句号和逗号)，加上减号(或用括号括起数字以表示否定的惯例)，加上指数符号(我达到那个)。

相关讨论

您可以用以下方法替换Shurok功能：

1
2
3
$(".numeric").keypress(function() {
    return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});

我看到了一些很好的答案，但我喜欢它们尽可能小而且简单，所以也许有人会从中受益。我会使用这样的javascript Number()和isNaN功能：

1
2
3
4
5
if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

希望这可以帮助。

相关讨论

如果你可以使用插件，这是我测试过的。除粘贴外，它效果很好。

数字输入

这是一个演示http://jsfiddle.net/152sumxu/2

下面的代码(Lib粘贴在线)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
    <h4>Demo of the plug-in    </h4>
   
       
            Any Number
           
                <input type="text" id="anyNumber" />
           
       
   


<script type="text/javascript">
    //    Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
    (function(b) {
        var c = { allowFloat: false, allowNegative: false};
        b.fn.numericInput = function(e) {
            var f = b.extend({}, c, e);
            var d = f.allowFloat;
            var g = f.allowNegative;
            this.keypress(function(j) {
                var i = j.which;
                var h = b(this).val();
                if (i>0 && (i<48 || i>57)) {
                    if (d == true && i == 46) {
                        if (g == true && a(this) == 0 && h.charAt(0) =="-") {
                            return false
                        }
                        if (h.match(/[.]/)) {
                            return false
                        }
                    }
                    else {
                        if (g == true && i == 45) {
                            if (h.charAt(0) =="-") {
                                return false
                            }
                            if (a(this) != 0) {
                                return false
                            }
                        }
                        else {
                            if (i == 8) {
                                return true
                            }
                            else {
                                return false
                            }
                        }
                    }
                }
                else {
                    if (i>0 && (i >= 48 && i <= 57)) {
                        if (g == true && h.charAt(0) =="-" && a(this) == 0) {
                            return false
                        }
                    }
                }
            });
            return this
        };
        function a(d) {
            if (d.selectionStart) {
                return d.selectionStart
            }
            else {
                if (document.selection) {
                    d.focus();
                    var f = document.selection.createRange();
                    if (f == null) {
                        return 0
                    }
                    var e = d.createTextRange(), g = e.duplicate();
                    e.moveToBookmark(f.getBookmark());
                    g.setEndPoint("EndToStart", e);
                    return g.text.length
                }
            }
            return 0
        }
    }(jQuery));

    $(function() {
       $("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
    });

使用：

1
2
3
4
5
6
    function onlyNumber(id){
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }

<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

如果要在按键后更新值，可以更改onKhaypress，onKeyDown或onKeyup的onChange。但事件onKeypress不能在任何浏览器中运行。

相关讨论

我可能有另一个(简单的)解决方法...

因为String.fromCharCode(key)在AZERTY键盘上返回奇怪的东西(数字键盘返回代码为g为1，1为＆amp;字符..

我已经意识到在输入中捕获keyup的最终值以将其重置为任意值是一个更简单，轻量级的＆amp; bugproof方法(也可以通过一些正则表达式来完成...保持小数等等...不必过滤其他Ctrl，Home，Del和Enter事件......)

用于jq：

1
2
3
4
<input class='pn'>

function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});

Onkeyup属性：

1
2
<input onkeyup='positiveNumericInput(this)'>
function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
相关讨论

您可以附加到按键事件，然后根据需要过滤按键，例如：

1
<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);"  type="text">

而实际的JavaScript处理程序将是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function validateNUM(e,field)
{
    var key = getKeyEvent(e)
    if (specialKey(key)) return true;
    if ((key >= 48 && key <= 57) || (key == 46)){
        if (key != 46)
            return true;
        else{
            if (field.value.search(/\./) == -1 && field.value.length > 0)
                return true;
            else
                return false;
        }
    }

function getKeyEvent(e){
    var keynum
    var keychar
    var numcheck
    if(window.event) // IE
        keynum = e.keyCode
    else if(e.which) // Netscape/Firefox/Opera
        keynum = e.which
    return keynum;
}
相关讨论

1
2
3
function digitsOnly(obj) {
   obj.value = obj.value.replace(/\D/g,"");
}

并在元素中

1
<input type="text" onkeyup="digitsOnly(this);" />

这也适用于波斯语和阿拉伯语数字:)

1
2
3
4
5
6
7
8
9
10
 setNumericInput: function (event) {
          var key = window.event ? event.keyCode : event.which
          if (event.keyCode === 8 ||
        (key >= 48 && key <= 57) ||
        (key >= 1776 && key <= 1785)) {
            return true
          } else {
            event.preventDefault()
          }
        }

我正在寻找一种阻止数字输入的方法，然后，因为我没有在答案中找到它，这段代码对我来说很好。

我只需要在onkeypress事件中输入它。

如果你只需要阻止输入数字，我相信这样可以正常工作。

1
onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"

是的，HTML5可以。试试这个代码(w3school)：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

我调整了一些，但它需要更多的工作来符合JavaScript的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function validateNumber(myEvent,decimal) {
    var e = myEvent || window.event;
    var key = e.keyCode || e.which;

    if (e.shiftKey) {
    } else if (e.altKey) {
    } else if (e.ctrlKey) {
    } else if (key === 48) { // 0
    } else if (key === 49) { // 1
    } else if (key === 50) { // 2
    } else if (key === 51) { // 3
    } else if (key === 52) { // 4
    } else if (key === 53) { // 5
    } else if (key === 54) { // 6
    } else if (key === 55) { // 7
    } else if (key === 56) { // 8
    } else if (key === 57) { // 9

    } else if (key === 96) { // Numeric keypad 0
    } else if (key === 97) { // Numeric keypad 1
    } else if (key === 98) { // Numeric keypad 2
    } else if (key === 99) { // Numeric keypad 3
    } else if (key === 100) { // Numeric keypad 4
    } else if (key === 101) { // Numeric keypad 5
    } else if (key === 102) { // Numeric keypad 6
    } else if (key === 103) { // Numeric keypad 7
    } else if (key === 104) { // Numeric keypad 8
    } else if (key === 105) { // Numeric keypad 9

    } else if (key === 8) { // Backspace
    } else if (key === 9) { // Tab
    } else if (key === 13) { // Enter
    } else if (key === 35) { // Home
    } else if (key === 36) { // End
    } else if (key === 37) { // Left Arrow
    } else if (key === 39) { // Right Arrow
    } else if (key === 190 && decimal) { // decimal
    } else if (key === 110 && decimal) { // period on keypad
    // } else if (key === 188) { // comma
    } else if (key === 109) { // minus
    } else if (key === 46) { // Del
    } else if (key === 45) { // Ins
    } else {
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

然后通过以下方式调用：

1
2
3
$('input[name=Price]').keydown(function(myEvent) {
    validateNumber(myEvent,true);
});
相关讨论

使用jQuery的另一个简单方法：

1
2
3
4
5
$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

现在只需将每个输入类设置为Numeric，如：

1
<input type="text" id="inp2" name="inp2" class='Numeric' />
相关讨论

这会立即删除任何不良字符，只允许一个点，短，并允许退格等：

1
2
3
4
$('.numberInput').keyup(function () {
    s=$(this).val();
    if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});

对于那些喜欢单行的人。

1
string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

我在输入类型="text"上使用此代码，并使用AngularJS在keypress上激活，但是如果愿意则可以使用jQuery。只需将此代码放入一个以某种方式激活按键的功能即可。

它只允许数字，数字+十进制，数字+十进制+数字。

码

1
2
3
4
5
6
7
8
9
10
11
12
13
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

testOne ="kjlsgjkl983724658.346.326.326..36.346"
=>"983724658.34";

testTwo =".....346...3246..364.3.64.2346......"
=>"346.";

testThree ="slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=>"3";

testFour ="622632463.23464236326324363"
=>"622632463.23";

这是为美国货币构建的，但可以更改为允许超过小数点后两位小数，如下所示...

更改的代码

1
2
3
4
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');

testFour ="dfskj345346346.36424362jglkjsg....."
=>"345346346.36424362";

:)

我用完了这个功能：

1
onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) return false;"

这在IE和Chrome中工作得很好，我不知道为什么它在firefox中也不能正常工作，这个功能阻止了Firefox中的tab键。

对于tab键工作正常firefox添加这个：

1
onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
相关讨论

您可以尝试使用'''onkeydown'''事件，并在它不是允许的键之一时取消事件(event.preventDefault或类似的事件)。

这是一个非常简短的解决方案，不使用已弃用的keyCode或which，不会阻止任何非输入键，并使用纯javascript。 (在Chromium 70.0.3533，Firefox 62.0和Edge 42.17134.1.0中测试过)

HTML：

1
<input type="text" onkeypress="validate(event)">

JS：

1
2
3
4
5
6
7
8
9
function validate(ev) {
    if (!ev) {
        ev = window.event;
    }

    if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key ==="")) {
        return ev.preventDefault();
    }
}

希望我没有在这里用一根丑陋的棍子击败一匹死马，但是我使用它来输入我的网站数量，它只允许从1到99的数字。

试试吧：
https://jsfiddle.net/83va5sb9/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      <input min="1" type="text" id="quantity" name="quantity" value="1"
      onKeyUp="numbersonly()">

     
    function numbersonly() {
      var str = document.getElementById("quantity").value
      var newstr =""
      for (i = 0; i < str.length; i++) {
        for (ii = 1; ii < 10; ii++) {
          if (str.charAt(i).indexOf(ii) > -1) {
            newstr += str.charAt(i)
          }
        }
      }
      if (newstr =="") {
        newstr = 1
      }
      if (parseInt(newstr) > 99) {
        newstr = 99
      }
      document.getElementById("quantity").value = newstr
    }

当涉及到傻瓜式的用户体验时，应该总是试图保持"用户智能"的参考点。

虽然忽略数字以??外的所有内容，但点和连字符似乎是完美的选择，你还应该考虑让它们输入任何内容，当它们完成时，净化输入;如果不是有效数字，则显示错误。无论用户设法做什么，此方法都将确保结果始终有效。如果用户天真地不理解警告和错误消息，按下按钮并看到没有任何反应(如在键码比较中)只会使他/她更加困惑。

此外，对于表单，验证和错误消息显示几乎是必要的。因此，规定可能已存在。这是算法：

  • On losing-focus or form-submission, do following.

    1.1. Read content from the input and apply parseFloat to result

    1.2. If the result is a Non-accessible-Number (NaN), reset the input field and pop-up an error message:"Please enter a valid number:
    eg. 235 or -654 or 321.526 or -6352.646584".

    1.3. Else, if String(result)!==(content from input), change value of the field to result and show warning message:"The value you
    entered have been modified. Input must be a valid number: eg. 235 or
    -654 or 321.526 or -6352.646584". For a field that cannot allow any unconfirmed value, then this condition may be added to step 1.2.

    1.4. Else, do nothing.

    • 如果需要，此方法还为您提供了基于最小值，最大值，小数位等执行验证的附加优势。只需在步骤1.2之后对结果执行这些操作。

    缺点：

  • 输入将允许用户输入任何值，直到焦点丢失或提交表单。但是，如果填写该领域的说明足够清楚，在90％的情况下，这可能不会出现。

  • 如果步骤1.3用于显示警告，则可能会被用户忽略，并可能导致无意的输入提交。抛出错误或正确显示警告可以解决这个问题。

  • 速度。这可能比正则表达式方法在几微秒内更慢。

    • 好处：
    假设用户具有阅读和理解的基本知识，

  • 高度可定制的选项。

  • 跨浏览器工作，独立于语言。

  • 使用表单中已有的功能来显示错误和警告。

    • 准备好验证时，调用此函数。我在这里使用了一个文本框

    在我的HTML中：

    1
    <input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />

    在我的JavaScript代码中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function check(num){
        var onlynumbers = true
        for (var i = 0; i < (num.length - 1); i++) {
            if (num.substr(i, 1) !="0" || num.substr(i, 1) !="1" || num.substr(i, 1) !="2" || num.substr(i, 1) !="3" || num.substr(i, 1) !="4" || num.substr(i, 1) !="5" || num.substr(i, 1) !="6" || num.substr(i, 1) !="7" || num.substr(i, 1) !="8" || num.substr(i, 1) !="9") {
                alert("please make sure that only numbers have been entered in the Quantaty box");
                onlynumbers = false
            }
        }
        if (onlynumbers == true) {

            //Execute Code
        }
    }

    我意识到一个旧帖子，但我认为这可以帮助某人。最近我不得不将文本框限制为只有5位小数。在我的情况下，用户输入也必须小于0.1

    1
    <input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText"  name="textfield" onkeyup="return doCheck('#fmargin',event);">

    这是doCheck功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function doCheck(id,evt)
    {
        var temp=parseFloat($(id).val());

        if (isNaN(temp))
            temp='0.0';
        if (temp==0)
            temp='0.0';

        $(id).val(temp);
    }

    除强制整数输入外，这是相同的功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function doCheck(id,evt)
    {
        var temp=parseInt($(id).val());

        if (isNaN(temp))
            temp='0';

        $(id).val(temp);
    }

    希望有人帮助

    正则表达式和匹配函数可以很好地适应这种情况。例如，我使用以下内容验证了作为图形坐标的4个输入框。它运作得相当好。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function validateInput() {
       if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
           jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
           jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
           jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
             alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
             location.reload();
       }
    }

    谢谢你们这真的帮助我！

    我发现perfert对数据库非常有用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function numonly(root){
        var reet = root.value;    
        var arr1=reet.length;      
        var ruut = reet.charAt(arr1-1);  
            if (reet.length > 0){  
            var regex = /[0-9]|\./;  
                if (!ruut.match(regex)){  
                var reet = reet.slice(0, -1);  
                $(root).val(reet);  
                }  
            }  
     }

    然后添加eventhandler：

    1
    onkeyup="numonly(this);"

    我个人建议使用http://www.decorplanit.com/plugin/中的autoNumeric插件 - 它支持所有不同的变体，如前缀/后缀处理，货币处理，负值格式，最小值，最大值等。