Html 在 <input type="number"> 中禁用文本输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21215049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Text Entry in <input type="number">
提问by coder
I am making a simple web app. At one part of it, I have included an input box of type="number"
我正在制作一个简单的网络应用程序。在其中的一部分中，我包含了一个 type="number" 的输入框
<input type="number" min="0">
Anyhow, when I run the code in my latest Google Chrome Browser, I am able to enter text too:
无论如何，当我在最新的 Google Chrome 浏览器中运行代码时，我也可以输入文本：
I do not want users to be able to do that. How should I rectify this?
我不希望用户能够这样做。我应该如何纠正这个问题？
回答by Tobias
You can use JavaScript (e.g. with jQuery) to allow only specific characters:
您可以使用 JavaScript（例如使用 jQuery）来仅允许特定字符：
// Catch all events related to changes
$('#textbox').on('change keyup', function() {
// Remove invalid characters
var sanitized = $(this).val().replace(/[^0-9]/g, '');
// Update value
$(this).val(sanitized);
});
Hereis a fiddle.
这是一个小提琴。
Same thing with support for floats:
支持浮动也是一样的：
// Catch all events related to changes
$('#textbox').on('change keyup', function() {
// Remove invalid characters
var sanitized = $(this).val().replace(/[^0-9.]/g, '');
// Remove the first point if there is more than one
sanitized = sanitized.replace(/\.(?=.*\.)/, '');
// Update value
$(this).val(sanitized);
});
And hereis another fiddle.
而这里是另一个小提琴。
Update:Although you might not need this, here is a solution that allows a leading minus sign.
更新：虽然您可能不需要这个，但这里有一个允许前导减号的解决方案。
// Catch all events related to changes
$('#textbox').on('change keyup', function() {
// Remove invalid characters
var sanitized = $(this).val().replace(/[^-0-9]/g, '');
// Remove non-leading minus signs
sanitized = sanitized.replace(/(.)-+/g, '');
// Update value
$(this).val(sanitized);
});
And now a final solution that allows only validdecimals (including floats and negative numbers):
现在是只允许有效小数（包括浮点数和负数）的最终解决方案：
// Catch all events related to changes
$('#textbox').on('change keyup', function() {
// Remove invalid characters
var sanitized = $(this).val().replace(/[^-.0-9]/g, '');
// Remove non-leading minus signs
sanitized = sanitized.replace(/(.)-+/g, '');
// Remove the first point if there is more than one
sanitized = sanitized.replace(/\.(?=.*\.)/g, '');
// Update value
$(this).val(sanitized);
});
回答by Simpal Kumar
You can use HTML5 input type numberto restrict only number entries:
您可以使用HTML5 输入类型 number来限制仅数字条目：
<input type="number" name="someid" />
This will work only in HTML5 complaint browser. Make sure your html document's doctype is:
这仅适用于 HTML5 投诉浏览器。确保您的 html 文档的 doctype 是：
<!DOCTYPE html>
For general purpose, you can have JS validation as below:
对于一般用途，您可以进行 JS 验证，如下所示：
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>
If you want to allow decimals replace the "if condition" with this:
如果你想允许小数用这个替换“if condition”：
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
