更改 event.keyCode 后 Html5 属性 maxlength="5" 变得无用答案

【问题标题】：Html5 attribute maxlength="5" gets useless after changing event.keyCode更改 event.keyCode 后 Html5 属性 maxlength="5" 变得无用
【发布时间】：2020-12-02 23:10:49
【问题描述】：

我有一个用于验证码的输入字段，可防止用户在其中输入非 Ascii 代码：

<input id="Captcha" asp-for="@Model.item.CaptchaCode" type="text" class="noFarsi" maxlength="5" placeholder="ُHuman Code" autocomplete="off" />

以及防止输入波斯语（波斯语）的相关类：

$(".noFarsi").keypress(function (e) {
   var keyCode = e.which;
   if (keyCode >= 127) {
       e.preventDefault();
   }
});

在我决定添加一些新功能之前，它一直正常工作。以下类将非英语输入转换为英语：

$(".convertToEnglish").keydown(function (e) {
            var keyCode = e.which;                
            switch (keyCode) {
                case 65: typeFunc("A", e, e.target.id); break;
                case 66: typeFunc("B", e, e.target.id); break;
                case 67: typeFunc("C", e, e.target.id); break;
                case 68: typeFunc("D", e, e.target.id); break;
                case 69: typeFunc("E", e, e.target.id); break;
                case 70: typeFunc("F", e, e.target.id); break;
                case 71: typeFunc("G", e, e.target.id); break;
                case 72: typeFunc("H", e, e.target.id); break;
                case 73: typeFunc("I", e, e.target.id); break;
                case 74: typeFunc("J", e, e.target.id); break;
                case 75: typeFunc("K", e, e.target.id); break;
                case 76: typeFunc("L", e, e.target.id); break;
                case 77: typeFunc("M", e, e.target.id); break;
                case 78: typeFunc("N", e, e.target.id); break;
                case 79: typeFunc("O", e, e.target.id); break;
                case 80: typeFunc("P", e, e.target.id); break;
                case 81: typeFunc("Q", e, e.target.id); break;
                case 82: typeFunc("R", e, e.target.id); break;
                case 83: typeFunc("S", e, e.target.id); break;
                case 84: typeFunc("T", e, e.target.id); break;
                case 85: typeFunc("U", e, e.target.id); break;
                case 86: typeFunc("V", e, e.target.id); break;
                case 87: typeFunc("W", e, e.target.id); break;
                case 88: typeFunc("X", e, e.target.id); break;
                case 89: typeFunc("Y", e, e.target.id); break;
                case 90: typeFunc("Z", e, e.target.id); break;
            }
        });




   function typeFunc(str, e, thisID) {
          e.preventDefault();
          $("#" + thisID).val($("#" + thisID).val() + str);
      }

随着最近的更改，并在我的验证码输入字段中添加convertToEnglish，当用户输入语言是 Eng 或 Farsi 时，没关系 :) 并且字段文本以英语正确填写，但最大长度属性变得无用，用户可以在我的验证码字段中输入 10 个或多个字符。任何帮助表示赞赏。

我尝试使用 keypress 和 Unicode 代码，但仍然没有同样的问题：

            $(".convertToEnglish").keypress(function (e) {
            var keyCode = e.keyCode;
            switch (keyCode) {
                case 1588: typeFunc("A", e, e.target.id); break;
                case 1584: typeFunc("B", e, e.target.id); break;
                case 1586: typeFunc("C", e, e.target.id); break;                
                // some similar codes here
            }
        });

另一点：输入字段阻止输入超过 5 个数字字符：我可以输入“12345ABCDEFG”，但不允许输入“123456ABCDEFG”

【问题讨论】：

如果您手动设置内容或阻止默认设置，那么限制字符数量的任务就落在了您身上——如果您使用 @ 填充节点，则实际上不会遵循节点上的任何属性规则987654327@。使用输入pattern 属性并将其限制为//[A-Za-z0-9] 或其他东西不是更好吗？
是的，我也通过 RegEx 进行了所有限制，但我想知道是否可以以某种方式更改输入语言。如果可能的话，
我不确定。我想知道您要在这里解决什么问题-波斯语是一个问题吗？验证码不是你会匹配的吗？如果它是波斯语，它不会匹配？这是否与两种语言之间的潜在混淆及其用户字符有关？要快速解决您的max-length 问题，只需在事件侦听器末尾尝试event.target.value = event.target.value.slice(5)。
用户用波斯语填写我的表单中的所有字段，然后按键盘上的Tab 按钮，然后开始输入验证码字段，然后抬头看看哇！没有输入验证码或波斯语，必须再次删除字段类型。我在找方便... 你的java脚本代码有用吗。谢谢
你也可以用正则表达式来处理它：event.target.value = event.target.value.replace( /[^A-Za-z0-9]/g, '' ).slice( 5 ) 会删除 any 个外来字符并将你的字符串限制为 5？（正则表达式：用任何内容替换非英语的所有内容）

标签： html jquery keycode

【解决方案1】：

如果防止任何不应该在文本字段中输入的内容是目标，也许可以通过更简单的方式实现：

event.target.value = event.target.value.replace( /[^A-Za-z0-9]/g, '' ).slice(0, 5);

这将您可以输入的字符限制为 A-Z、a-z 和 0-9，并规定了最大长度。

document.querySelector( '#input' ).addEventListener( 'input', event => {
  
  event.target.value = event.target.value.replace( /[^A-Za-z0-9]/g, '' ).slice(0, 5);
  
});

&lt;input type="text" id="input" /&gt;

【讨论】：