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

如果我理解正确，我自己使用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 3

您可以使用此按钮取消KeyDown事件

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

Answer 4

没有滚动，没有数字增量，提供最大长度，没有复制粘贴。

查看下面的小提琴，它具有类型编号表格字段中所需的功能。

<强> 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; 
}

<强> DEMO - JSFIDDLE

Answer 5

首先，您的标记不正确。表单标记必须包含输入标记：

<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引用该值，或者使用表单发布该值。

Answer 6

=INDEX(FILTER(A2:A5,B2:B5>=50),1)

//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*/
}

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

禁用写入输入类型编号HTML5

6 个答案: