我想将用户输入限制为 html 表单中的正数。
我知道您可以设置 min="0"，但是可以通过手动输入负数来绕过它。
有没有其他方法可以在不编写验证函数的情况下解决这个问题？
【问题讨论】：
这使用 Javascript，但您不必编写自己的验证例程。相反，只需检查 validity.valid 属性。当且仅当输入在范围内时才会如此。
<html>
<body>
<form action="#">
<input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>【讨论】：
<input type="number" name="test" min=0 save="" oninput="validity.valid ? this.save = value : value = this.save;"> 之类的东西 显然，这不应该按原样使用......你应该编写自己的处理函数来检查validity.valid并做正确的事情。跨度>
如果不验证输入的值，这是不可能的。
input type=number
type属性值为“数字”的input元素代表了一个精确的控件，用于将元素的值设置为一个代表数字的字符串。
由于它是一个表示数字的字符串，因此无法确定该字符串是否表示数值。
Permitted 属性不会让您验证数字输入控件的值。
在 JavaScript 的帮助下执行此操作的一种方法可能如下所示。
// Select your input element.
var numInput = document.querySelector('input');
// Listen for input event on numInput.
numInput.addEventListener('input', function(){
// Let's match only digits.
var num = this.value.match(/^\d+$/);
if (num === null) {
// If we have no match, value will be empty.
this.value = "";
}
}, false)<input type="number" min="0" />如果您计划将数据发送到服务器，请务必同时验证服务器上的数据。 客户端 JavaScript 无法确保发送的数据是您所期望的。
【讨论】：
如果您想确保默认值，即最小值或任何其他值，这是可行的解决方案。这也阻止了清除输入字段。同样的方式你也可以设置它的最大值。
<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value < 1) ? (1/1) : this.value;">【讨论】：
以下脚本只允许在输入中输入数字或退格键。
var number = document.getElementById('number');
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}<input type="number" id="number" min="0">【讨论】：
type="number" 已经解决了只允许输入数字的问题，正如此处其他答案所指出的那样。
仅供参考：使用jQuery，您可以使用以下代码覆盖焦点输出的负值：
$(document).ready(function(){
$("body").delegate('#myInputNumber', 'focusout', function(){
if($(this).val() < 0){
$(this).val('0');
}
});
});
这不会取代服务器端验证！
【讨论】：
在 html 上放置 onKeypress 事件监听器
<input type="text" onkeypress="validate(event)">
像这样编写验证函数：
<script>
function validate(event) {
if (event.key == "-") {
event.preventDefault();
return false;
}
}
</script>
如果 angularjs 通过 $event 代替 event，我已经在 angularjs 和 javascript 中对此进行了测试
【讨论】：
方式 01：
<input name="price" type="number" (keydown)="onKeydown($event)" min="0" required />
onKeydown(event: KeyboardEvent): boolean {
if (!((event.keyCode > 95 && event.keyCode < 106)
|| (event.keyCode > 47 && event.keyCode < 58)
|| event.keyCode === 8)) {
return false;
}
return true;
}
方式 02：
<input name="price" type="number" min="0" oninput="this.value = Math.abs(this.value)" required />
【讨论】：
在 HTML5 中，我喜欢这种方式。它也非常适合角度。
<input type="number" min="0" oninput="this.value = Math.abs(this.value)">
【讨论】：