HTML5限制输入字符

Question

是否可以限制HTML5/JavaScript中某些字符的输入？例如,我可以在屏幕上有一个输入文本框,如果用户试图键入一个字母,它将不会显示在框中,因为我将其限制为只有数字？

我知道你可以使用将检查提交的模式,但我希望"坏"字符永远不会被输入.

Answer 1

使用html5模式属性输入:

<input type="text" pattern="\d*" title="Only digits" />

要么

使用html5数字类型输入:

<input type="number" />

Answer 2

输入文本框

<input type="text" onKeyDown="myFunction()" value="" />

JavaScript的

function myFunction() {
    var e = event || window.event;  // get event object
    var key = e.keyCode || e.which; // get key cross-browser

    if (key < 48 || key > 57) { //if it is not a number ascii code
        //Prevent default action, which is inserting character
        if (e.preventDefault) e.preventDefault(); //normal browsers
            e.returnValue = false; //IE
    }
}

Answer 3

KeyboardEvent.keyCode已弃用，因此这里有一个使用该HMLElement.input事件的解决方案。该解决方案使用简单的正则表达式，并且只需从任何输入中删除有问题的元素即可很好地处理复制粘贴。

我的正则表达式：/[^\w\d]/gi

• 匹配除 ( ^) 单词字符 ( \w: az) 或数字 ( \d: 0-9) 之外的任何内容。
• g修饰符使正则表达式全局化（第一次匹配后不返回）
• i修饰符使正则表达式不区分大小写

使用此正则表达式，将不允许使用特殊字符和空格。如果您想添加更多字符，只需将允许的字符添加到正则表达式列表中即可。

function filterField(e) {
  let t = e.target;
  let badValues = /[^\w\d]/gi;
  t.value = t.value.replace(badValues, '');
}

let inputElement = document.getElementById('myInput');
inputElement.addEventListener('input', filterField);

<input id="myInput" type="text" style="width: 90%; padding: .5rem;" placeholder="Type or paste (almost) anything...">

Answer 4

为了略微改善jonhopkins的优秀答案,我添加了退格键并删除了键接受,如下所示:

    function inputValidate(){
   var e = event || window.event;  
   var key = e.keyCode || e.which;                              
   if (((key>=48)&&(key<=57))||(key==8)||(key == 46)) { //allow backspace //and delete
           if (e.preventDefault) e.preventDefault(); 
           e.returnValue = false; 
   }
 }

Answer 5

对于限制字符符号，例如“-”和“，”

<input type="text" pattern="[^-,]+">

用于限制数字

<input type="text" pattern="[^0-9]+">

用于限制字母

<input type="text" pattern="[^a-zA-Z]+">