Html 禁用输入类型号 HTML5 中的写入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17164278/
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 writing in input type number HTML5
提问by Souad
I want to disable writing into a field of type number, for avoiding strings data, and write just numbers, so how to enable scroll bars only ?
我想禁止写入数字类型的字段，以避免字符串数据，并且只写入数字，那么如何仅启用滚动条？
<form>
<input type="number" path="note" min="1" max="20"/>
</form>
回答by Ilu
If you are able/allowed to use jQuery, you can disable keypresson the type='number'.
如果您能够/允许使用 jQuery，则可以keypress在type='number'.
$("[type='number']").keypress(function (evt) {
evt.preventDefault();
});
This allows you to use up and down arrows on the input, but doesn't allow keyboard input.
这允许您在输入上使用向上和向下箭头，但不允许键盘输入。
回答by Viktor Tarnavsky
You can cancel KeyDown event using this
您可以使用此取消 KeyDown 事件
<input type="number" onKeyDown="return false">
<input type="number" onKeyDown="return false">
回答by vipatron
If I understood you correctly, I just implemented the same thing myself using vanilla Javascript (no jQuery).
如果我理解正确的话，我只是使用 vanilla Javascript（没有 jQuery）自己实现了同样的事情。
window.onload = () => {
//add event listener to prevent the default behavior
const mouseOnlyNumberInputField = document.getElementById("mouse-only-number-input");
mouseOnlyNumberInputField.addEventListener("keypress", (event) => {
event.preventDefault();
});
}<form>
<input id="mouse-only-number-input" name="number" type="number" min="1" max="20" value="10" />
</form>回答by Surya R Praveen
No Scrolling, no increment of numbers, max-length provided, no copy paste.
无滚动，无数字增量，提供最大长度，无复制粘贴。
Check out the Fiddle below, which has the features needed within a type number form field.
查看下面的 Fiddle，它具有类型编号表单字段中所需的功能。
HTML
HTML
<form class="form-horizontal home" role="form" action="" method="post" id="payment-form" novalidate="novalidate">
<label for="number">Mobile number : </label>
<input class="form-control" id="number" name="number" type="number" data-rule-required="true" aria-required="true" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
</form>
CSS
CSS
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
回答by TheTurkey
Firstly, your markup is incorrect. The form tags must surround the input tag:
首先，您的标记不正确。表单标签必须包围输入标签：
<form name="my_form">
<input ...code...
<input ...code...
</form>
Secondly, if you are using HTML5 and want a number input, you can use this:
其次，如果您使用的是 HTML5 并且想要一个数字输入，您可以使用这个：
<input type="number" name="my_number" min="0" max="100" step="1" value="50"/>
(from W3Schools)
（来自W3Schools）
Be aware that current browser implementations of the "number" input vary.
请注意，“数字”输入的当前浏览器实现各不相同。
You then reference the value using Javascript, or have it posted using the form.
然后您使用 Javascript 引用该值，或使用表单发布它。
