html - 禁用输入类型号 HTML5 中的写入

Question

我想禁用写入数字类型的字段，以避免字符串数据，并且只写入数字，那么如何仅启用滚动条？

<form>
 <input type="number"  path="note" min="1" max="20"/>
</form>

Answer 1

如果您能够/允许使用 jQuery，您可以禁用keypress.type='number'

$("[type='number']").keypress(function (evt) {
    evt.preventDefault();
});

这允许您在输入上使用向上和向下箭头，但不允许键盘输入。

Answer 2

您可以使用此取消 KeyDown 事件

<input type="number" onKeyDown="return false">

Answer 3

如果我理解正确的话，我只是使用 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>

Answer 4

//using this method can make a disabled writing on input type=number

input {
  cursor: default;
  /*when hover it default pointer*/
  color: transparent;
  /*make blinking cursor disappear*/
  /*but it will make to text disappear*/
  text-shadow: 0px 0px black;
  /*when it disappear add text shadow to black*/
}

<input type="number" min="-32767" max="32767" onkeydown="return false //return value false" value="0">
<!--make an input-->

将此方法与 css 和 html 一起使用

Answer 5

不滚动，不增加数字，提供最大长度，不复制粘贴。

查看下面的 Fiddle，它具有类型编号表单字段中所需的功能。

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, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
</form>

CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

演示 - JSFIDDLE

Answer 6

首先，您的标记不正确。表单标签必须围绕输入标签：

<form name="my_form">
    <input ...code...
    <input ...code...
</form>

其次，如果你使用 HTML5 并且想要输入数字，你可以使用这个：

<input type="number" name="my_number" min="0" max="100" step="1" value="50"/>

（来自W3Schools）

请注意，“数字”输入的当前浏览器实现有所不同。

然后，您可以使用 Javascript 引用该值，或者使用表单将其发布。