Js中的过滤输入

最新推荐文章于 2024-06-21 16:54:57 发布

前端小白进阶

最新推荐文章于 2024-06-21 16:54:57 发布

阅读量2.4k

点赞数

文章标签： JS 过滤输入

本文链接：https://blog.csdn.net/qq_26102281/article/details/83789331

版权

当我们需要输入的文本中不包含某些字符，例如，电话号码中不能包含非数值的字符，而响应文本框中的插入字符操作是keypress事件，可以通过阻止这个事件的默认行为来屏蔽此类字符。但是这样会使得所有的按键都会被屏蔽，结果会导致文本框编程可读的。
因此，我们可以通过检测keypress事件对应的字符编码，然后在决定如何响应。
下面我以输入手机号码为例，分析如何屏蔽非数值字符：虽然理论上，只有在用户按下字符键才会触发keypress事件，但有些浏览器也会对其他触发此事件。FireFox和Safari（3.1版本以前）会对上下键、退格和删除键触发keypress事件。

在FireFox中，所有由非字符触发的keypress事件对应的字符编码为0，而在Safari 3以前的版本中，对应的字符编码全部为9，因此我们只需通过屏蔽那些字符编码小于10的键即可。
我们需要屏蔽起亚使用Ctrl的组合键，因此，我们还需要添加一个检测条件，以确保用户没有按下Ctrl键；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤输入</title>
</head>
<body>
<div>
  请输入您的手机号:<input type="text" size="14" id="txt1"/>
</div>

<script>
  var oTxt=document.getElementById("txt1");
  oTxt.onkeypress=function()
  {
   var ev=ev||window.event;
   var charCode=ev.charCode;
   if (!/\d/.test(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey)
   {
    return false;
   }
  }
</script>