regex 如何防止无效字符被输入到输入字段

bfnvny8b 于 2023-10-22 发布在其他

关注(0)|答案(9)|浏览(114)

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

regex

来源：https://stackoverflow.com/questions/8282266/how-to-prevent-invalid-characters-from-being-typed-into-input-fields

9条答案

按热度按时间

cuxqih211#

为了防止在第一时间设置它，您可以在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;
    }
});

赞(0）回复(0）举报 2023-10-22

vatpfxk52#

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

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

赞(0）回复(0）举报 2023-10-22

vom3gejh3#

你可以很容易地在一个HTML行中做到这一点。
像这样不允许空格：

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

或者只允许数字：

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

只需查找您想要允许或不允许的任何数字的unicode。

赞(0）回复(0）举报 2023-10-22

fnx2tebb4#

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

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

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

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

赞(0）回复(0）举报 2023-10-22

bq3bfh9z5#

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

然后添加key-filter类到你的输入，如果使用jquery或

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

只要把你想允许的字符放在^后面的[]里。这允许所有字母数字_ -和。

赞(0）回复(0）举报 2023-10-22

x9ybnkn66#

我发现这个解决方案在：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>

它允许文本和！“#$%&但您可以通过将这些添加到验证中来调整它，以便通过删除！在返回

赞(0）回复(0）举报 2023-10-22

b1uwtaje7#

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

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

赞(0）回复(0）举报 2023-10-22

zvokhttg8#

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

赞(0）回复(0）举报 2023-10-22

pnwntuvh9#

这里有一个简单的方法。只允许数字

const isNumberKey = (e: any) =>
{
    if (e.key.length > 1)
    {
        return true;
    }

    const charCode = e.key.charCodeAt(0);

    if (charCode < 48 || charCode > 57)
    {
        return false;
    }

    return true;
};

赞(0）回复(0）举报 2023-10-22

我来回答

regex 如何防止无效字符被输入到输入字段

9条答案

相关问题

热门标签

最新问答