javascript - 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

为了稍微改进 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 4

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

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

用于限制数字

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

用于限制字母

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

Answer 5

//improved wbt11a function

function numberFieldStrictInput(allowcomma, allownegative) {
    var e = event || window.event;  // get event object
    var key = e.keyCode ||`enter code here` e.which; // get key cross-browser


    if(key==8 || key==46 || key == 9 || key==17 || key==91 || key==18 || 
            key==116 || key==89 || key==67 || key==88 || key==35 || key==36) //back, delete tab, ctrl, win, alt, f5, paste, copy, cut, home, end
        return true;

    if(key == 109 && allownegative)
        return true;

    if(key == 190 && allowcomma)
        return true;

    if(key>=37 && key<=40) //arrows
        return true;

    if(key>=48 && key<=57) // top key
        return true;

    if(key>=96 && key<=105) //num key
        return true;
    console.log('Not allowed key pressed '+key);

    if (e.preventDefault) e.preventDefault(); //normal browsers
        e.returnValue = false; //IE

}   

//on input put onKeyDown="numberFieldStrictInput(1,0)"

Answer 6

这个怎么样（它支持特殊键，如自动复制、粘贴、F5）？

function filterNumericInput() {
    var e = event || window.event;  // get event object
    if (e.defaultPrevented) {
      return;
    }
    const key = e.key || e.code;
    if ((e.key.length <= 1) && (!(e.metaKey || e.ctrlKey || e.altKey))) {
      if (!((key >= '0' && key <= '9') || (key === '.') || (key === ',') || (key === '-') || (key === ' '))) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    }
}

Answer 7

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 8

var keybNumberAndAlpha = new keybEdit(' 0123456789abcdefghijklmnopqrstuvwxyz');

function keybEdit(strValid, strMsg) {
    var reWork = new RegExp('[a-z]','gi');		//	Regular expression\
    //	Properties
    if(reWork.test(strValid))
            this.valid = strValid.toLowerCase() + strValid.toUpperCase();
    else
            this.valid = strValid;
    if((strMsg == null) || (typeof(strMsg) == 'undefined'))
            this.message = '';
    else
            this.message = strMsg;
    //	Methods
    this.getValid = keybEditGetValid;
    this.getMessage = keybEditGetMessage;
    function keybEditGetValid() {
            return this.valid.toString();
    }
    function keybEditGetMessage() {
            return this.message;
    }
}

function editKeyBoard(ev, objForm, objKeyb) {
    strWork = objKeyb.getValid();    
    strMsg = '';							// Error message
    blnValidChar = false;					// Valid character flag
    var BACKSPACE = 8;
    var DELETE = 46;
    var TAB = 9;
    var LEFT = 37 ;
    var UP = 38 ;
    var RIGHT = 39 ;
    var DOWN = 40 ;
    var END = 35 ;
    var HOME = 35 ;
    
    // Checking backspace and delete  
    if(ev.keyCode == BACKSPACE || ev.keyCode == DELETE || ev.keyCode == TAB 
        || ev.keyCode == LEFT || ev.keyCode == UP || ev.keyCode == RIGHT || ev.keyCode == DOWN)  {
            
        blnValidChar = true;
        
    }
    
    if(!blnValidChar) // Part 1: Validate input
            for(i=0;i < strWork.length;i++)
                    if(ev.which == strWork.charCodeAt(i) ) {
                            blnValidChar = true;
                            break;
                    }
                            // Part 2: Build error message
    if(!blnValidChar) 
    {
                //if(objKeyb.getMessage().toString().length != 0)
                    //		alert('Error: ' + objKeyb.getMessage());
            ev.returnValue = false;		// Clear invalid character
            
            
                ev.preventDefault();
        
            objForm.focus();						// Set focus
    }
}

<input type="text"name="worklistFrmDateFltr" onkeypress="editKeyBoard(event, this, keybNumberAndAlpha)" value="">

Answer 9

将输入限制为字母、数字和“。” （仅适用于 React 用户）

这是我的简单解决方案，我找不到更好的 React 解决方案并自己制作。3个步骤。

首先，创建一个状态。

const [tagInputVal, setTagInputVal] = useState("");

然后，使用状态作为输入值 ( value={tagInputVal}) 并将事件传递给onChange处理程序。

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

然后，在onChange处理程序中设置事件的值。

function onChangeTagInput(e) {
    setTagInputVal(e.target.value.replace(/[^a-zA-Z\d.]/ig, ""));
}

Answer 10

我发现 onKeyDown 捕获 Shift 键、箭头等。为了避免考虑到这一点，我可以通过订阅onKeyPress轻松过滤掉字符输入。