是否可以在特定输入长度后阻止用户输入并禁止特定键？ [复制]答案

【问题标题】：is it possible to prevent user input after a specific input length and also ban specific keys? [duplicate]是否可以在特定输入长度后阻止用户输入并禁止特定键？ [复制]
【发布时间】：2019-11-18 21:38:20
【问题描述】：

我有一些输入数字字段，我阻止了一些关键输入，例如“e”、“+”、“-”...... 我想知道是否可以在同一控件中添加另一个关于最大长度的约束。

maxlength 不起作用，我添加了 max 和 min，但我的范围是防止用户输入超过 2 个数字。

   <input type="number" class="form-control"
          onkeydown="return (event.keyCode !== 69 && event.keyCode !== 109 && event.keyCode !== 107 && event.keyCode !== 187 && event.keyCode !== 189 )"
          id="inputMVD" formControlName="dataEvaluationMonth" maxlength="2" name="Month" min="1" max="12" required>

正如我上面写的，我需要防止用户输入特定数量的数字（可能是 2 或 4 或 10）

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以在每次输入更改时调用正则表达式来格式化输入：

const handleKeyDown = e =&gt; e.target.value = e.target.value.match(/^([^e+-]{0,2})/)[0]

&lt;input type="text" oninput="handleKeyDown(event)"&gt;

【讨论】：

这对我来说效果很好，但我不得不将它转换成 ts
@M.Sgarbossa 听起来不错，我没有意识到你想让我用打字稿写出来。如果您需要更多帮助，请不要害怕提问，如果您发现答案对您有所帮助，请随时将此答案标记为正确答案?

【解决方案2】：

尝试在输入中遵循 HTML 属性-

 <input type="text" name="usrname" maxlength="2" pattern="[A-Za-z]{2}">

Provide your required allowed pattern like "[1,2]{2}"

【讨论】：

我的输入是 type="number"，这使得 maxlength 无法使用
@Sgarbossa 按照设计，当 type="number" 时忽略 maxLength。请检查这个答案link

【解决方案3】：

使用自定义 js 函数的 onkeydown 事件，然后在完成所有控制后，您可以决定阻止该事件还是继续。

function myFunction(event) {
  event.preventDefault();
  event.stopPropagation();
  alert("You pressed a key inside the input field");
}

<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input type="text" onkeydown="myFunction(event)">


</body>
</html>

【讨论】：

我正在使用它，如果你阅读了代码.. 我想知道是否有办法内联阻止这两个东西
是的，你可以使用它内联 if(event.target.value.length>2)event.preventDefault()
但最好使用您的自定义函数，这样您就有一个干净清晰的代码，在同一个函数中您测试 event.keyCode 和 event.target.value.length 并键入 (int/string)数字的最小值和最大值