HTML文本输入仅允许数字输入-Java 学习之路

674

有没有快速的方法来设置HTML文本输入（ <input type=text /> ）只允许数字键击（加上'.'）？

30 回答

8
您还可以将输入值（默认情况下视为字符串）与强制为数字的自身进行比较，如：
```
if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}
```
但是，您需要将其绑定到keyup等事件 .
回复于 2024-04-30T01:32:16+08:00
3
现在使用 type="number" 这个属性支持大多数浏览器
```
<input type="number" maxlength="3" ng-bind="first">
```
回复于 2024-04-30T01:32:16+08:00

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

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

以下脚本允许正数和负数

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

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] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

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

回复于 2024-04-30T01:32:16+08:00

16
使用jQuery和replace（）而不是查看event.keyCode或event.which的简短而实现的实现：
```
$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});
```
键入的字母暂时出现的小副作用和CTRL / CMD A似乎表现得有点奇怪 .
回复于 2024-04-30T01:32:16+08:00

2解决方案：

使用表单验证器（例如使用jQuery validation plugin）

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

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

回复于 2024-04-30T01:32:16+08:00

很简单....

// In a JavaScript function (can use HTML or PHP).

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

In your form input:

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

输入最大值（以上这些允许12位数字）

回复于 2024-04-30T01:32:16+08:00

这是一个改进的功能：

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();
  }
}

回复于 2024-04-30T01:32:16+08:00

5

如果您想在alpha或数字之间向设备（可能是手机）建议，可以使用 <input type="number"> .

回复于 2024-04-30T01:32:16+08:00
7

记住区域差异（欧元以与美国人相反的方式使用句号和逗号），加上减号（或在括号中用数字括起来表示否定的惯例），加上指数表示法（我正在达到那个） .

回复于 2024-04-30T01:32:16+08:00
10
Most answers here all have the weakness of using key- events .

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

无论输入机制如何（按键，复制粘贴，右键复制粘贴，语音到文本等），这个简单的解决方案似乎对我来说最适合跨平台 . 所有文本选择键盘宏仍然可以工作，它甚至会限制通过脚本设置非数字值的能力 .
```
function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
```
回复于 2024-04-30T01:32:16+08:00

这是geowa4's solution的扩展版本 . 支持 min 和 max 属性 . 如果数字超出范围，将显示先前的值 .

You can test it here.

用法： <input type=text class='number' maxlength=3 min=1 max=500>

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'));
                }

            }       
    });     
});

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

$(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'));
            }
    }); 
});

回复于 2024-04-30T01:32:16+08:00

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

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

回复于 2024-04-30T01:32:16+08:00

8

HTML5有 <input type=number> ，听起来不错 . 目前，只有Opera本机支持它，但有a project具有JavaScript实现 .

回复于 2024-04-30T01:32:16+08:00

116

使用这个DOM

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

而这个脚本

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();
  }
}

回复于 2024-04-30T01:32:16+08:00

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

允许的角色

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

不允许通过事件的字符和字符

Alphabetic value
Special characters
Copy
Paste
Drag
Drop

$(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;
}

<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"></script>

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

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

回复于 2024-04-30T01:32:16+08:00

还有一个例子，您只需在输入字段中添加数字 can not 字母

<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');">

回复于 2024-04-30T01:32:16+08:00

5
HTML5支持正则表达式，因此您可以使用：
```
<input id="numbersOnly" pattern="[0-9.]+" type="text">
```
警告：某些浏览器尚不支持此功能 .
回复于 2024-04-30T01:32:16+08:00
934
您可以使用模式：
```
<input id="numbers" pattern="[0-9.]+" type="number">
```
Here you can see the complete mobile website interface tips .
回复于 2024-04-30T01:32:16+08:00

我已经长时间努力寻找一个很好的答案，我们迫切需要 <input type="number" ，但是缺少这些，这两个是我能提出的最简洁的方法：

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

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

<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) )">

回复于 2024-04-30T01:32:16+08:00

244

只是使用jQuery的另一个变种

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

回复于 2024-04-30T01:32:16+08:00

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

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;
    }
};

也附加到按键事件

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

和HTML：

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

Here is a jsFiddle example

回复于 2024-04-30T01:32:16+08:00

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

$(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();
    };
});

回复于 2024-04-30T01:32:16+08:00

4
使用此DOM：
```
<input type = "text" onkeydown = "validate(event)"/>
```
这个脚本：
```
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 ...
```
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将是在谷歌浏览器上使用“preventDefault”无法控制，但是，使用属性“onkeydown”，TAB变得可控！

TAB的ASCII代码=> 9

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

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

NCount = 0

48 NCount = 48

NCOUNT

48 NCount = 49

NCOUNT

...

48 NCount = 57

在数字键只有10（0 - 9）的情况下，但如果它们是100万，那么创建一个包含所有这些键的数组是没有意义的 .

ASCII码：
- 8 ==>（退格）;
- 46 =>（删除）;
- 37 =>（左箭头）;
- 39 =>（右箭头）;
- 48 - 57 =>（数字）;
- 36 =>（家）;
- 35 =>（结束）;
回复于 2024-04-30T01:32:16+08:00

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

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

回复于 2024-04-30T01:32:16+08:00

30
JavaScript

下面脚本中的 setInputFilter 函数允许您在文本 <input> 上使用 any 类型的输入过滤器，包括各种数字过滤器 . 这将正确处理复制粘贴，拖放，键盘快捷键，上下文菜单操作，不可键入的键和所有键盘布局 . 作品cross-browser and on mobile, IE 9+ . Note that you still must do server side validation!

亲自尝试on JSFiddle .
```
// 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*$/ 将输入限制为 integer 数字
- /^\d*$/ 将输入限制为 unsigned integer 数字
- /^[0-9a-f]*$/i 将输入限制为 hexadecimal 数字
- /^-?\d*[.,]?\d*$/ 将输入限制为 floating point 数字（允许 . 和 , 作为小数分隔符）
- /^-?\d*[.,]?\d{0,2}$/ 将输入限制为 currency 值（即最多两位小数）
您可能还想使用输入过滤器将输入限制为例如整数值高达1500：
```
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 1500);
});
```
HTML 5

HTML 5具有 <input type="number"> 的本机解决方案（请参阅specification），但请注意browser support varies . 例如，Firefox（从版本63.0.3开始）仍然允许用户在该字段中输入文本 .

亲自尝试on w3schools.com .

更复杂的验证选项

如果你想做一些其他验证的点点滴滴，这可能很方便：
回复于 2024-04-30T01:32:16+08:00

JavaScript的

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();
    }
}

另外你可以添加逗号，句号和减号（，.-）

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

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

回复于 2024-04-30T01:32:16+08:00

input type="number" 是HTML5属性 .

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

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)"/>

回复于 2024-04-30T01:32:16+08:00

<input name="amount" type="text" value="Only number in here"/> 

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

回复于 2024-04-30T01:32:16+08:00

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

<input type="number" />

和
```
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
```
<input type="text" onkeypress="return isNumberKey(event);">
回复于 2024-04-30T01:32:16+08:00

JavaScript代码：

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代码：

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

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

回复于 2024-04-30T01:32:16+08:00

HTML文本输入仅允许数字输入

30 回答

JavaScript

HTML 5

更复杂的验证选项

相关问题