禁止在html5输入栏位中使用@字符-编程知识-白鹭情

我们已经成功地使用了这样的 html5 栏位验证：

<input type="text" title="This field is required" required>

但是对于特定的栏位，我们喜欢在栏位中禁止特定的特殊字符：@。我们尝试使用模式，但它不起作用。代码如下

<input type="text" pattern="[^@]" title="Do not allow @" title="This field is required" required>

关于如何正确执行此操作的任何想法。顺便祝大家新年快乐，并希望我们在新的一年里不会遇到任何编码问题！

uj5u.com热心网友回复：

如果您想禁止用户写@字符，请使用此代码

<!DOCTYPE html>
<html>
<body>
  <form id="my-form">
    <input type="text" id="myInputID">
    <button type="submit" onclick="submit()">Submit</button>
  </form>

  <script>
    var el = document.getElementById("myInputID");
    el.addEventListener("keypress", function(event) {
      if (event.key === '@') {
        event.preventDefault();
      }
    });

  </script>
</body>
</html>

uj5u.com热心网友回复：

@如果在属性值中添加 after [^@]，则可以禁止提交时使用字符pattern：

<form>
<input type="text" pattern="[^@] " title="Do not allow @" title="This field is required" required />
<input type="Submit"/>
</form>

该pattern="[^@] "模式转换为^(?:[^@] )$匹配一个或多个字符而不是@从开始到结束。

但是，如果您还想阻止@字符输入，则可以将上面的代码增强为

<form>
  <input type="text" pattern="[^@] " onkeypress="return event.charCode !== 64" title="Do not allow @" title="This field is required" required />
  <input type="Submit" />
</form>