我正在使用jQuery工具验证器，它通过jQuery实现HTML5验证。
到目前为止一切都很顺利，除了一件事。在HTML5规范中，输入类型“number”既可以是整数也可以是浮点数。
这似乎是非常短视的，因为它只在数据库字段是带符号的浮点数时才有用(对于无符号整数，您将不得不退回到模式验证，从而失去支持它的浏览器的上下箭头等额外功能)。
是否有另一种输入类型或属性将输入限制为无符号整数?
我一个也找不到。
将步长设置为1并不是答案，因为它不限制输入。您仍然可以在文本框中键入一个负浮点数。
此外，我知道模式验证(我在最初的文章中提到过)，但这不是问题的一部分。
我想知道HTML5是否允许将“数字”类型的输入限制为正整数值。对于这个问题，答案似乎是“不，没有关系”。
我不想使用模式验证，因为这会在使用jQuery工具验证时造成一些缺陷，但现在看来，规范不允许使用更清晰的方式来实现这一点。
将step属性设置为1:
<input type="number" step="1" />
这似乎有点bug在Chrome现在，所以它可能不是目前最好的解决方案。
一个更好的解决方案是使用pattern属性，它使用正则表达式来匹配输入:
<输入类型=“文本”模式=“\d*”/>
\d是数字的正则表达式，*表示它接受多个数字。
是的，HTML5可以。试试下面的代码(w3school):
<!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>
看到最小和最大参数了吗?我用Chrome 19(正常)和Firefox 12(不正常)试了试。
设置步骤="any"。工作很好。 参考:http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
<input type="text" name="PhoneNumber" pattern="[0-9]{10}" title="Phone number">
使用这段代码，文本字段的输入限制为只能输入数字。Pattern是HTML 5中的新属性。
模式属性文档
这不仅适用于HTML5。这在所有浏览器中都可以正常工作。试试这个:
. getelementbyid(“输入”)。addEventListener("keyup"， function() { 这一点。Value = this.value。替换(/ [^ 0 - 9]/ g, " "); })； <input id="input" type="text">
使用JavaScript的简单方法:
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
var valKeyDown;
var valKeyUp;
function integerOnly(e) {
e = e || window.event;
var code = e.which || e.keyCode;
if (!e.ctrlKey) {
var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116); // 96 TO 105 - 0 TO 9 (Numpad)
if (!e.shiftKey) { //48 to 57 - 0 to 9
arrIntCodes1.push(48); //These keys will be allowed only if shift key is NOT pressed
arrIntCodes1.push(49); //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
arrIntCodes1.push(50);
arrIntCodes1.push(51);
arrIntCodes1.push(52);
arrIntCodes1.push(53);
arrIntCodes1.push(54);
arrIntCodes1.push(55);
arrIntCodes1.push(56);
arrIntCodes1.push(57);
}
var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
arrIntCodes1.push(e.keyCode);
}
if ($.inArray(code, arrIntCodes1) == -1) {
return false;
}
}
return true;
}
$('.integerOnly').keydown(function (event) {
valKeyDown = this.value;
return integerOnly(event);
});
$('.integerOnly').keyup(function (event) { //This is to protect if user copy-pastes some character value ,..
valKeyUp = this.value; //In that case, pasted text is replaced with old value,
if (!new RegExp('^[0-9]*$').test(valKeyUp)) { //which is stored in 'valKeyDown' at keydown event.
$(this).val(valKeyDown); //It is not possible to check this inside 'integerOnly' function as,
} //one cannot get the text printed by keydown event
}); //(that's why, this is checked on keyup)
$('.integerOnly').bind('input propertychange', function(e) { //if user copy-pastes some character value using mouse
valKeyUp = this.value;
if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
$(this).val(valKeyDown);
}
});
模式是很好的，但如果你想限制输入的数字只有type="text"，你可以使用oninput和一个正则表达式如下:
<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
我为我自己工作:)
模式总是可取的限制，尝试oninput和最小值发生1只输入数字从1起
<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
value=${var} >
我正在工作哦Chrome和有一些问题，即使我使用html属性。我最终得到了这个js代码
$("#element").on("input", function(){
var value = $(this).val();
$(this).val("");
$(this).val(parseInt(value));
return true;
});
简短，用户友好
该解决方案支持制表符，退格，进入，减号直观的方式
<input type=text onkeypress=“return /^-？[0-9]*$/.test（this.value+event.key）”>
但是，它不允许改变已经键入的数字为减号，不处理复制粘贴的情况。
作为替代，您可以使用基于R. Yaghoobi答案的解决方案，它允许放置减号和处理复制粘贴情况，但当用户输入禁止字符时，它会删除整数
<input type=text oninput="this. "Value = ["，'-'].includes(this.value) ?这一点。值:this.value|0">
注意:以上内联解决方案仅用于小型项目。在其他情况下，它们在函数中不透明，并移动到你的js文件。
最短的
这是R. Yaghoobi答案的尺寸改进
<input type=“number” oninput=“this.value|=0”/>
这里我们使用标准的“或”运算符简写，例如二进制9 | 2 = 11:0b1001 | 0b1010 = 0b1011。该运算符首先以隐式方式将数字转换为整数，然后执行或运算。但因为OR带0不会改变任何东西，所以number被转换为整数。非数字字符串的OR值为0。
整数输入意味着它只能接受正数、0和负数。这就是我如何能够实现这一点使用Javascript按键。
<input type="number" (keypress)="keypress($event, $event.target.value)" >
keypress(evt, value){
if (evt.charCode >= 48 && evt.charCode <= 57 || (value=="" && evt.charCode == 45))
{
return true;
}
return false;
}
给定的代码不允许用户在运行时输入字母或小数，只允许输入正整数和负整数值。
张贴它，如果将来有人需要它
const negativeValuePrevent = (e) => {
const charCode = e.which ? e.which : e.keyCode;
if(charCode > 31 && (charCode < 48 || charCode > 57)
&& charCode !== 46){
if(charCode < 96 || charCode > 105){
e.preventDefault();
return false;
}
}
return true;
};
这是一个老问题，但可访问的(现在大多数浏览器都支持)版本是:
<input type="text" inputmode="numeric" pattern="[0-9]*">
参见https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
大多数答案都过时了。
以下不再工作:
<!-- It doesn't invalidate decimals when using validators -->
<input type="number" min="0" step="1" />
下面的解决方案更加优雅和直接，并且适用于截至2022年初的所有最新浏览器。
<!-- It DOES invalidate decimals when using validators -->
<input type="number" pattern="\d*" />
