小开

将step属性设置为1:

<input type="number" step="1" />

This seems a bit buggy in Chrome right now so it might not be the best solution at the moment.

A better solution is to use the pattern attribute, that uses a regular expression to match the input:

<input type="text" pattern="\d*" />

\d是一个数字的正则表达式，*表示它接受多个数字。

小开

从specs

step="any"或正浮点数
指定元素值的值粒度

所以你可以简单地将它设置为1:

小开

你试过像这样将step属性设置为1吗

<input type="number" step="1" />

小开

是的，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(不正常)试了试。

小开

在未来™(参见我可以用)中，在向您提供键盘的用户代理上，您可以使用input[inputmode]将文本输入限制为数字。

小开

将step属性设置为任何浮点数，例如0.01，就可以了。

小开

设置step="any"。工作很好。参考:http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/ < / p >

小开

仅使用HTML (文档)可以达到的最佳效果:

<input type="number" min="0" step="1"/>

小开

<input type="text" name="PhoneNumber" pattern="[0-9]{10}" title="Phone number">

使用这段代码，文本字段的输入限制为只能输入数字。Pattern是HTML 5中的新属性。

模式属性doc .

小开

这不仅适用于HTML5。这在所有浏览器中都可以正常工作。试试这个:

document.getElementById("input").addEventListener("keyup", function() {
this.value = this.value.replace(/[^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和min发生1只输入数字从1开始

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

小开

只要把它放在你的输入字段:onkeypress='return event.charCode >= 48 && event.charCode <= 57'

小开

我正在工作哦Chrome和有一些问题，即使我使用html属性。我最终得到了这个js代码

$("#element").on("input", function(){
var value = $(this).val();


$(this).val("");
$(this).val(parseInt(value));


return true;
});

小开

也许它不适合每一个用例，但是

<input type="range" min="0" max="10" />

可以做一个很好的工作:小提琴。

检查文档。

小开

目前，不可能阻止用户只使用HTML在输入中写入十进制值。你必须使用javascript

小开

<input type="number" oninput="this.value = Math.round(this.value);"/>

小开

简短，用户友好

该解决方案支持制表符，退格，进入，减号直观的方式

<input type=text onkeypress="return /^-?[0-9]*$/.test(this.value+event.key)">

however it not allow to change already typed number to minus and not handle copy-paste case.

As alternative you can use solution based on R. Yaghoobi answer which allow to put minus and handle copy-paste case, but it delete whole number when user type forbidden character

<input type=text oninput="this.value= ['','-'].includes(this.value) ? this.value : this.value|0">

注意:以上内联解决方案仅用于小型项目。在其他情况下，它们在函数中不透明，并移动到你的js文件。

小开

最短的

这是R. Yaghoobi回答的大小改进

<input type="number" oninput="this.value|=0"/>

We use here standard shorthand for "OR" operator e.g 9 | 2 = 11 in binary: 0b1001 | 0b1010 = 0b1011 . This operator first cast numbers to integers in implicit way and then do OR. But because OR with zero don't change anything so number is cast to integer. OR with non-number string gives 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*" />

只接受整数的数字输入类型?

简短，用户友好

最短的