问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

原文由 Michael Swarts 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascript正则表达式dom-events
阅读 476
2 个回答
得票最新
社区维基
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;
    }
});

原文由 user1034772 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

上面的代码确实说了——只允许数字。您可以通过添加异常来修改它，例如像这样说 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>

原文由 Michael Adekunle Salami 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题