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

bfnvny8b  于 2023-10-22  发布在  其他
关注(0)|答案(9)|浏览(137)

Onkeydown，我运行以下JavaScript：

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

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

编辑：全局创建事件。我是这么做的：

  1. function Globalization() {
  2.       var inputs = document.getElementsByTagName('input');
  3.       for (i = 0; i < inputs.length; i++) {
  4.           inputs[i].onfocus = createEventHandler(
  5.               ThisOnFocus, inputs[i]);
  6.           inputs[i].onblur = createEventHandler(
  7.               ThisOnBlur, inputs[i]);
  8.           inputs[i].onkeydown = createEventHandler(
  9.               ThisOnKeyDown, inputs[i]);
  10.           inputs[i].onkeyup = createEventHandler(
  11.               ThisOnKeyUp, inputs[i]);
  12.       }
  13.   }

Globalization()运行body.onload
因此，一个典型的输入字段有HTML，没有像这样的函数调用：

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

9条答案

按热度按时间
cuxqih21

cuxqih211#

为了防止在第一时间设置它，您可以在keydown事件处理程序上返回false，从而防止事件进一步传播。
我使用jQuery编写了下面的示例，但您可以在传统绑定时使用相同的函数。
虽然在服务器端进行验证也很重要，但为了用户友好性，客户端验证也很重要。

  1. $("input.number-only").bind({
  2.     keydown: function(e) {
  3.         if (e.shiftKey === true ) {
  4.             if (e.which == 9) {
  5.                 return true;
  6.             }
  7.             return false;
  8.         }
  9.         if (e.which > 57) {
  10.             return false;
  11.         }
  12.         if (e.which==32) {
  13.             return false;
  14.         }
  15.         return true;
  16.     }
  17. });
展开查看全部
赞(0）分享  回复(0）举报  2023-10-22
vatpfxk5

vatpfxk52#

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

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <script>
  6.             function keyispressed(e){
  7.                 var charValue= String.fromCharCode(e.keyCode);
  8.                 if((isNaN(charValue)) && (e.which != 8 )){ // BSP KB code is 8
  9.                     e.preventDefault();
  10.                 }
  11.                 return true;
  12.             }
  13.         </script>
  14.     </head>    
  15.     <body>
  16.         <input type="text" onkeydown="return keyispressed(event);"/>
  17.     </body>
  18. </html>
展开查看全部
赞(0）分享  回复(0）举报  2023-10-22
vom3gejh

vom3gejh3#

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

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

或者只允许数字：

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

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

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

fnx2tebb4#

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

  1. // <input oninput=onInput(event) />
  3. const onInput = event => {
  4.     event.target.value = event.target.value.replace(/[^0-9+]/g, '')
  5. }

来源：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
bq3bfh9z

bq3bfh9z5#

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

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

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

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

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

x9ybnkn66#

我发现这个解决方案在：http://help.dottoro.com/ljlkwans.php
按预期工作。

  1. <script type="text/javascript">
  2.     function FilterInput (event) {
  3.         var keyCode = ('which' in event) ? event.which : event.keyCode;
  5.         isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) ||
  6.                     (keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */);
  7.         modifiers = (event.altKey || event.ctrlKey || event.shiftKey);
  8.         return !isNumeric || modifiers;
  9.     }
  10. </script>
  12. < body>
  13. The following text field does not accept numeric input:
  14. <input type="text" onkeydown="return FilterInput (event)" />< /body>

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

展开查看全部
赞(0）分享  回复(0）举报  2023-10-22
b1uwtaje

b1uwtaje7#

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

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <script>
  6.             function keyispressed(e){
  7.                 var charval= String.fromCharCode(e.keyCode);
  8.                 if(isNaN(charval)){
  9.                     return false;
  10.                 }
  11.                 return true;
  12.             }
  13.         </script>
  14.     </head>
  16.     <body>
  17.         <input type="text" onkeydown="return keyispressed(event);"/>
  18.     </body>
  19. </html>
展开查看全部
赞(0）分享  回复(0）举报  2023-10-22
zvokhttg

zvokhttg8#

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

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

pnwntuvh9#

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

  1. const isNumberKey = (e: any) =>
  2. {
  3.     if (e.key.length > 1)
  4.     {
  5.         return true;
  6.     }
  8.     const charCode = e.key.charCodeAt(0);
  10.     if (charCode < 48 || charCode > 57)
  11.     {
  12.         return false;
  13.     }
  15.     return true;
  16. };
展开查看全部
赞(0）分享  回复(0）举报  2023-10-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com