Javascript 将输入字段（类型=编号）限制为1到20

我有一个输入字段：

    <input id="thing" type='number' placeholder='Up to 20 tickets' min='1' max='20' name='tickets'>

尽管我列出了最小值和最大值，它仍然可以在字段中输入随机字母，等等

我只允许用户输入任何类型的数字1到20出现在字段中。我该怎么做

“输入”DOM事件？ 一些HTML表单魔法

---

UpdateHaaa，好的，所以动态创建的表单输入的功能与普通输入不同。值字段未连接到用户操作

永远不要相信用户的输入。html输入中的限制值只是为了方便用户。即使您以某种方式限制了用户直接更改输入值的能力，他仍然可以按f12键（在Chrome中），并手动将值更改为他想要的任何值

---

这就是说，您的代码工作得很好，并且做了您希望它做的事情-它限制用户只输入数字，介于1和20之间。不过，在处理这些数据之前，您必须在服务器上对其进行验证，这样服务器将确保它是否真的是一个数字，并且它实际上介于1和20之间，因为正如我所说的，没有办法阻止用户在输入中输入任何他想要的内容。

永远不要相信用户的输入。html输入中的限制值只是为了方便用户。即使您以某种方式限制了用户直接更改输入值的能力，他仍然可以按f12键（在Chrome中），并手动将值更改为他想要的任何值

---

这就是说，您的代码工作得很好，并且做了您希望它做的事情-它限制用户只输入数字，介于1和20之间。不过，在处理这些数据之前，您必须在服务器上对其进行验证，这样服务器将确保它是否真的是一个数字，并且它实际上介于1和20之间，因为正如我所说的，没有办法阻止用户在输入中输入任何他想要的内容。

您可以使用纯Javascript

<script>


function handleChange(input) {
    if ((input.value < 0) && ((input.value > 20))
       return false;
  }
</script>

功能手柄更改（输入）{
如果（（输入值<0）和（（输入值>20））
返回false；
}

HTMl代码

<input type="number" onchange="handleChange(this);" />

或者你可以用这个

<input type="number" onKeyPress="if(this.value.length>20) return false;" />

---

您可以使用纯Javascript

<script>


function handleChange(input) {
    if ((input.value < 0) && ((input.value > 20))
       return false;
  }
</script>

功能手柄更改（输入）{
如果（（输入值<0）和（（输入值>20））
返回false；
}

HTMl代码

<input type="number" onchange="handleChange(this);" />

或者你可以用这个

<input type="number" onKeyPress="if(this.value.length>20) return false;" />

使用Chrome

document.querySelector（“输入”）.addEventListener（“输入”），函数（evt）{
var v=evt.target.value；
如果（v）{
console.log（v）；//仅输出数字
}
}，false）；

使用Chrome

document.querySelector（“输入”）.addEventListener（“输入”），函数（evt）{
var v=evt.target.value；
如果（v）{
console.log（v）；//仅输出数字
}
}，false）；

我最终做了以下工作：

var temp = ''
input.addEventListener('input', function (event) {
  if (this.value == '') return
  if (this.value < 1 || this.value > 20 || this.value.match(/\D/)) return this.value = temp
  temp = this.value
}, false)

var temp=''
addEventListener（'input'，函数（事件）{
如果（this.value=''）返回
如果（this.value<1 | | this.value>20 | | this.value.match（/\D/））返回this.value=temp
温度=此值
}，错）

输入事件是最广泛的。它捕获复制粘贴和所有其他方式更改字段值

检查空字符串很重要，因为如果有人键入了15，改变了主意，想键入20，则需要在键入2和0之前退格两次。因此，空的状态是有效的

每当函数运行时，它都会将新值存储在一个临时变量中，如果我们得到不喜欢的输入，我们会立即应用该值，因为preventDefault（）不适用于输入事件。

我最后这样做了：

var temp = ''
input.addEventListener('input', function (event) {
  if (this.value == '') return
  if (this.value < 1 || this.value > 20 || this.value.match(/\D/)) return this.value = temp
  temp = this.value
}, false)

var temp=''
addEventListener（'input'，函数（事件）{
如果（this.value=''）返回
如果（this.value<1 | | this.value>20 | | this.value.match（/\D/））返回this.value=temp
温度=此值
}，错）

输入事件是最广泛的。它捕获复制粘贴和所有其他方式更改字段值

检查空字符串很重要，因为如果有人键入了15，改变了主意，想键入20，则需要在键入2和0之前退格两次。因此，空的状态是有效的

---

每当函数运行时，它都会将新值存储在一个临时变量中，如果我们得到不喜欢的输入，我们会立即应用它，因为preventDefault（）不适用于输入事件。

请参阅此stackoverflow答案：您使用的浏览器可能重复？它必须适用于所有浏览器。链接中的这些答案将输入限制在特定的数字范围内（我已经阅读了其中的大多数）不允许退格或刷新页面。这会打破用户的期望，这是最基本的方法。我将尝试编写一个keyCode/preventDefault解决方案，允许TAB、F5、退格、删除、粘贴、复制…呃…看到这个stackoverflow答案：你使用的浏览器可能重复？它必须在所有浏览模式下都能工作以及链接中那些将输入限制在特定数字范围内的答案（我已经阅读了大部分）不允许退格或刷新页面。这会打破用户的期望，这是最基本的方法。我将尝试编写一个keyCode/preventDefault解决方案，该解决方案允许TAB、F5、退格、删除、粘贴、复制……呃……我键入字段时看到字段中的字母。@Costa使用Chrome？我键入字段时看到字段中的字母。@Costa使用Chrome？当然：）谢谢。这是为了方便。我将在服务器上测试所有用户输入。当然：）谢谢。这是为了方便。我将测试服务器上的所有用户输入。“因为preventDefault（）不适用于输入事件”-“输入”的“默认事件”是什么？你想阻止什么？我想阻止在字段中输入字符。是的，但是

input

发生在值更改后。所以你不能阻止它，因为它已经过去了。我的观点是，这不是“它不起作用”，而是-