如何防止在输入字段中输入无效字符答案

【问题标题】：How to prevent invalid characters from being typed into input fields如何防止在输入字段中输入无效字符
【发布时间】：2011-11-26 22:56:33
【问题描述】：

Onkeydown，我运行以下 JavaScript：

function ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-\s]/ig, '') : null;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-\s]/ig, '') : null;
   }
}

这三个标题属性之一被赋予页面上的各种输入字段。只要正确擦除无效字符，该代码就可以工作，但直到输入下一个字符。我想找到一种方法来简单地拒绝无效输入。感谢您的帮助！

编辑：我在全局范围内创建事件。我是这样做的：

      function Globalization() {
      var inputs = document.getElementsByTagName('input');
      for (i = 0; i < inputs.length; i++) {
          inputs[i].onfocus = createEventHandler(
              ThisOnFocus, inputs[i]);
          inputs[i].onblur = createEventHandler(
              ThisOnBlur, inputs[i]);
          inputs[i].onkeydown = createEventHandler(
              ThisOnKeyDown, inputs[i]);
          inputs[i].onkeyup = createEventHandler(
              ThisOnKeyUp, inputs[i]);
      }
  }

Globalization() 运行 body.onload

因此，一个典型的输入字段有 HTML 没有这样的函数调用：

          <input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/>

【问题讨论】：

将此函数添加到OnKeyPress 和OnKeyUp
请记住，这种验证是不够的，你总是在服务器端删除这个字符。
@sll，添加到 Onkeyup 会产生退格效果。（Onkeypress 也一样）。我想要做的是拒绝出现输入。

标签： javascript regex dom-events

【解决方案1】：

为了防止它首先被设置，您可以在 keydown 事件处理程序上返回 false，从而防止事件进一步传播。

我使用 jQuery 编写了下面的示例，但您可以在传统绑定时使用相同的函数。

虽然在服务器端进行验证也很重要，但为了用户友好，客户端验证也很重要。

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});

【讨论】：

供参考，关键代码数字（9、57、32 等）代表 unicode 字符，此处列出：en.wikipedia.org/wiki/List_of_Unicode_characters
现在不推荐使用“which”属性，请改用“keyCode”：developer.mozilla.org/en-US/docs/Web/Events/keydown

【解决方案2】：

上面的代码确实说 - 只允许数字。您可以通过添加异常来修改它，例如像这样说 BACKSPACE

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charValue= String.fromCharCode(e.keyCode);
                if((isNaN(charValue)) && (e.which != 8 )){ // BSP KB code is 8
                    e.preventDefault();
                }
                return true;
            }
        </script>
    </head>    
    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>

【讨论】：

var charval 必须是 var charValue

【解决方案3】：

$('.key-filter').keypress(function () {
    if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();
});

如果使用 jquery，则将 key-filter 类添加到您的输入中或

<input type="text" onkeypress="if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();" />

只需将要允许的字符放在 ^ 之后的 [] 内。这允许所有字母数字 _ - 和 .

【讨论】：

我宁愿使用 regex test() 方法而不是 replace()。另外，返回 false 就足够了。

【解决方案4】：

我在以下位置找到了这个解决方案：http://help.dottoro.com/ljlkwans.php

按预期工作。

<script type="text/javascript">
    function FilterInput (event) {
        var keyCode = ('which' in event) ? event.which : event.keyCode;

        isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) ||
                    (keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */);
        modifiers = (event.altKey || event.ctrlKey || event.shiftKey);
        return !isNumeric || modifiers;
    }
</script>

< body>
The following text field does not accept numeric input:
<input type="text" onkeydown="return FilterInput (event)" />< /body>

它允许文本和 !"#$%& 但您可以调整它，将这些添加到验证中，只允许通过删除返回中的 ! 来允许数字

【讨论】：

【解决方案5】：

代码对于防止用户输入除数字以外的任何其他字符很有用。

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function keyispressed(e){
                var charval= String.fromCharCode(e.keyCode);
                if(isNaN(charval)){
                    return false;
                }
                return true;
            }
        </script>
    </head>

    <body>
        <input type="text" onkeydown="return keyispressed(event);"/>
    </body>
</html>

【讨论】：

值得注意的是：此代码还可以防止退格和 Shift+箭头选择等操作。
感谢您的回答！它帮助我意识到我需要在 onkeydown 中返回该函数才能使其工作。

【解决方案6】：

您可以在单个 html 行中轻松完成此操作。

这样禁止空格：

<input type="text" onkeypress="return event.charCode != 32">

或者这个只允许数字：

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

只需查找您想要允许或禁止的任何号码的unicode。

【讨论】：

【解决方案7】：

针对 onkeyup 事件而不是 onkeydown 事件运行您的代码。通过这种方式，您可以访问最后一次击键的结果，当 onkeyup 事件执行时，在不知道其结果的情况下按下一个键。

【讨论】：

不应该。我在自己的应用程序上使用了这个事件，它工作得很好。要查看我在做什么，只需转到以下链接并开始输入代码。 prettydiff.com/?m=beautify
不确定该页面上的哪个字段，但它对我不起作用。

【解决方案8】：

您可以在“输入”事件期间替换您的输入值：

// <input oninput=onInput(event) />

const onInput = event => {
    event.target.value = event.target.value.replace(/[^0-9+]/g, '')
}

来源：https://knplabs.com/fr/blog/how2-tips-how-to-restrict-allowed-characters-inside-a-text-input-in-one-line-of-code

【讨论】：