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

Question

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

Answer 1

JavaScript的

^{注意:这是一个更新的答案.下面的评论是指使用密钥代码搞乱的旧版本.}

<input>下面的脚本中的函数允许您对文本使用任何类型的输入过滤器setInputFilter,包括各种数字过滤器.这将正确处理自IE 9以来的复制+粘贴,拖放,键盘快捷键,上下文菜单操作,不可键入的键,光标位置,所有键盘布局和所有浏览器.请注意,您仍然必须进行服务器端验证!

在JSFiddle上自己尝试一下.

// Restricts input for the given textbox to the given inputFilter function.
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);
      } else {
        this.value = "";
      }
    });
  });
}

用法:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

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

• 整数值(正面和负面):
  setInputFilter
• 整数值(仅限正数):
  <input type="number">
• 整数值(正数且达到特定限制):
  step
• 浮点值(允许两者min和max小数分隔符):
  e
• 货币值(即最多两位小数):
  E
• 十六进制值:
  <input>

jQuery的

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

HTML 5

HTML 5有一个原生解决方案setInputFilter(参见规范),但请注意浏览器支持有所不同:

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

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

更复杂的验证选项

如果你想做一些其他验证的点点滴滴,这可能很方便:

• https://gist.github.com/nbouvrette/84ef4f498ac06cdd5b60
• http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
• https://github.com/lockevn/html-numeric-input
• https://github.com/jonstipe/number-polyfill

Answer 2

使用这个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();
  }
}

Answer 3

我一直在努力寻找一个很好的答案,我们迫切需要<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) )">

Answer 4

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

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

Answer 5

还有一个例子,对我很有用:

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

这是一个jsFiddle示例

Answer 6

HTML5有<input type=number>,这听起来很适合你.目前,只有Opera本机支持它,但有一个项目具有JavaScript实现.

Answer 7

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

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

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

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Answer 8

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

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

Answer 9

HTML5支持正则表达式,因此您可以使用:

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

警告:某些浏览器尚不支持此功能.

Answer 10

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

Answer 11

很简单....

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

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

在您的表单输入中:

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

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

Answer 12

2解决方案:

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

使用正则表达式在输入字段的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);"/>

Answer 13

更安全的方法是检查输入的值,而不是劫持按键并尝试过滤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>

编辑:我删除了我的旧答案,因为我认为它已经过时了.

Answer 14

您可以使用模式:

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

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

Answer 15

请找下面提到的解决方案.在此用户可以可以只输入numeric值,而且用户不能能够copy,paste,drag和drop输入.

允许的角色

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

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

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

$(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">

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

Answer 16

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

Answer 17

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

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

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

Answer 18

再举一个例子,你可以在输入字段中添加唯一号码,不能信

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

Answer 19

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,正则表达式不允许它,所以这是一个绕过错误的简单方法:)

Answer 20

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

Answer 21

只是使用jQuery的另一个变种

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

Answer 22

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

<input type="number" maxlength="3" ng-bind="first">

Answer 23

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

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

希望这可以帮助。

Answer 24

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

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

但是,您需要将其绑定到事件,如键盘等.

Answer 25

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

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

Answer 26

这是一个改进的功能：

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

Answer 27

使用此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，因为onkeydown属性是在onkeypress属性之前检查的。问题可能出在Google Chrome浏览器中。

使用属性“ onkeypress”，在Google chrome上使用“ preventDefault”将无法控制TAB，但是使用属性“ 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 =>（结束）;

Answer 28

为了获得更好的用户体验，我的解决方案：

超文本标记语言

<input type="tel">

jQuery

$('[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 结果）

Answer 29

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

您的html代码：

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

以及使用jQuery的js函数

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

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

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

Answer 30

这是我仅针对 React 用户的简单解决方案，我找不到更好的解决方案并制作了自己的解决方案。3 个步骤。

首先，创建一个状态。

const [tagInputVal, setTagInputVal] = useState("");

然后，使用状态作为输入值 ( value={tagInputVal}) 并将事件传递给onChange处理程序。

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

然后，在处理程序中设置事件的值onChange。

function onChangeTagInput(e) {
    setTagInputVal(e.target.value.replace(/[^\d.]/ig, ""));
}