如何解决JS正则表达式在按键过程中不起作用的问题-解网

问：

我有一些要求，如下所示：

最小字符数为 3，最大字符数为 8。
只接受大写字母和下划线。
前三（3）个字符必须为大写。

可接受的输入示例：“SAL”、“SAL_”、“SAL_G”

现在的问题：

如何控制用户必须用大写字母强制填写第一个三个字符？
在键盘上按下时不显示下划线

法典

$('#myInput').on("keypress", function(e) {
  var regex = new RegExp("^[A-Z]+(?:_[A-Z]+)*$")
  var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
  if (regex.test(str)) {
    return true;
  } else {
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" type="text" id="myInput" minlength="3" maxlength="8">

JavaScript HTML jQuery 正则表达式

试试下面的片段

const inputElements = document.querySelectorAll("#myInput");
inputElements.forEach((inputElement) => {
  inputElement.addEventListener("input", function (event) {
    let inputText = event.target.value;
    let pregExpr = /[^A-Z]/g;
    if (inputText.length > 3) {
      pregExpr = /[^a-zA-Z]/g;
    }
    let sanitizedText = inputText.replace(pregExpr, "");
    if (sanitizedText.length > 2) {
      var trimmedString = sanitizedText.substring(0, 3);
      sanitizedText = trimmedString + "_" + sanitizedText.slice(3);
    }
    event.target.value = sanitizedText;
  });

  inputElement.addEventListener("keydown", (event) => {
    if (event.key === "Backspace") {
      let inputText = inputElement.value;
      if (inputText.endsWith("_")) {
        let newText = inputText.substring(0, inputText.length - 2);
        inputElement.value = newText;
      } else if (inputText.length > 0) {
        let newText = inputText.substring(0, inputText.length - 1);
        inputElement.value = newText;
      }
      event.preventDefault();
    }
  });
});

<input class="form-control" type="text" id="myInput" minlength="3" maxlength="8">

旧代码版本

const inputElements = document.querySelectorAll("#myInput");
inputElements.forEach((inputElement) => {
  inputElement.addEventListener("input", function (event) {
    const inputText = event.target.value;
    let pregExpr = /[^A-Z]/g;
    if (inputText.length > 3) {
      pregExpr = /[^a-zA-Z]/g;
    }
    let sanitizedText = inputText.replace(pregExpr, "");
    if (sanitizedText.length > 2) {
      var trimmedString = sanitizedText.substring(0, 3);
      sanitizedText = trimmedString + "_" + sanitizedText.slice(3);
    }
    event.target.value = sanitizedText;
  });
});

<input class="form-control" type="text" id="myInput" minlength="3" maxlength="8">

如何解决JS正则表达式在按键过程中不起作用的问题

How to solve JS Regex not working during keypress

评论

试试下面的片段

旧代码版本

评论