是否可以在特定输入长度后阻止用户输入并禁止特定键？ [复制]
Posted
技术标签:
【中文标题】是否可以在特定输入长度后阻止用户输入并禁止特定键？ [复制]【英文标题】：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）
【问题讨论】：
【参考方案1】：您可以在每次输入更改时调用正则表达式来格式化输入：
const handleKeyDown = e => e.target.value = e.target.value.match(/^([^e+-]0,2)/)[0]<input type="text" oninput="handleKeyDown(event)">【讨论】：
这对我来说效果很好，但我不得不将它转换成 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)数字的最小值和最大值以上是关于是否可以在特定输入长度后阻止用户输入并禁止特定键？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章