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

Question

我发现了一些类似的指令，但没有任何帮助，它们都是针对特殊字符或数字的。

我只需要让用户输入 1 , 2 , 3, 4, 5, N, O, A, B, C 。所有其他字符都应受到限制。

我可以通过什么方式自己选择输入的受限/允许字符？

• 对javascript不是很熟悉。

Answer 1

试试这个

$(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" />

2020 年 11 月 25 日更新

let textarea = document.getElementById('txt');

textarea.addEventListener('keydown', (e) => {
  if(['1','2','3','4','5', 'N', 'O', 'A', 'B', 'C'].indexOf(e.key) !== -1){
    // do something
  } else {
    e.preventDefault();
  }
});

CodePen Demo

Answer 2

您是否要限制使用无效值提交的表单，或者从字面上阻止用户输入这些值，这并不是 100% 清楚的。其他答案涉及后者，我认为 是 你的意思，但是会有人到达这里（像我一样）只想阻止表单提交。

在这种情况下：

在input 元素上使用pattern 属性：

<input pattern="[REGEX HERE]">

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

https://regex101.com/

Answer 3

使用 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 4

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 之间的字符。

如果你想进一步研究它，你可以谷歌 mdn keydown 事件并寻找 Morzilla 开发者网络。

Answer 5

如果您想禁用输入字段中的一些字符，您可以执行以下操作：

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

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

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

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