使用模式属性

Question

我发现了一些类似的说明，但没有一个有用，所有这些都是特殊的字符或数字。

我需要使用户类型只有1,2,3,4,5，N，O，A，B，C。所有其他角色都应该受到限制。

我可以自己选择限制/允许的字符作为输入吗？

不太熟悉javascript。

Answer 1

使用JQuery，

$("input").keypress( function(e) {
    var chr = String.fromCharCode(e.which);
    if ("12345NOABC".indexOf(chr) < 0)
        return false;
});

没有JQuery

document.getElementById("foo").onkeypress = function(e) {
    var chr = String.fromCharCode(e.which);
    if ("12345NOABC".indexOf(chr) < 0)
        return false;
};

对于一个衬垫，来自@mplungjan和@matthew-lock的评论

document.querySelector("#foo").onkeypress = function(e) {
    return "12345NOABC".indexOf(String.fromCharCode(e.which)) >= 0;
};

Answer 2

试试这个

$(function(){
  $('#txt').keypress(function(e){
    if(e.which == 97 || e.which == 98 || e.which == 99 || e.which == 110 || e.which == 111 || e.which == 65 || e.which == 66 || e.which == 67 || e.which == 78 || e.which == 79 || e.which == 49 || e.which == 50 || e.which == 51 || e.which == 52 || e.which == 53){
    } else {
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txt' value='' onpaste="return false" />

2018年3月9日更新

$(function(){
  $('#txt').keypress(function(e){
    // allowed char: 1 , 2 , 3, 4, 5, N, O, A, B, C
    let allow_char = [97,98,99,110,111,65,66,67,78,79,49,50,51,52,53];
    if(allow_char.indexOf(e.which) !== -1 ){
      //do something
    }
    else{
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txt' value='' onpaste="return false" />

Answer 3

不清楚是要限制使用无效值提交的表单，还是要阻止用户甚至键入这些值，都是100％不清楚的。其他答案与后者有关，我认为是您的意思，但是有些人（如我）到这里来只是想阻止表单提交。

在这种情况下：

在pattern元素上使用input属性：

<input pattern="[REGEX HERE]">

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

https://regex101.com/

Answer 4

如果要从输入字段中禁用几个字符，可以执行以下操作：

<input type="text" onkeydown="return (event.keyCode!=86);"/>

86是V的代码。从以下链接检查其他密钥的代码。

https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 5

html

<input type="text" name="" value="" id="testr">
<script type="text/javascript" src="testkeydown.js"></script>

javascript

document.getElementById('testr').addEventListener('keydown', function(e) {
    const regex = RegExp('[0-9a-zA-Z]');

    if (!regex.test(e.key) && e.key != 'backspace') {
        e.preventDefault();
    }
});

在上面的代码示例中，您会看到一段代码，该代码禁用了普通js中大多数不在0-9，a-z和A-Z之间的字符。

如果您想进行更多研究，可以通过Google mdn keydown事件并查找Morzilla开发人员网络。

Answer 6

如果有人正在寻找纯js解决方案：您需要像这样防止onkeydown事件的键

HTML

<input type="text" name="" value="" onkeydown="preventSomeKeys(event)">

JavaScript

function preventSomeKeys(event){
  var keyCode = event.keyCode
  if([97,98,99,110,111,65,66,67,78,79,49,50,51,52,53].includes(keyCode)){
     return false;
  }
}

Answer 7

使用模式属性

它不会阻止用户输入不需要的字符，但是当他们提交表单时，会出现一条简洁的错误消息，您甚至可以自定义。请参阅下面的此代码：

<input pattern="[1-5A-CNO].*" title="You can only use the following characters: 1 , 2 , 3, 4, 5, N, O, A, B, C">

源/沙箱试试看： https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern

禁用输入字段中的某些字符

7 个答案:

使用模式属性