JS 屏蔽非数字字符的输入

最新推荐文章于 2022-04-21 19:15:44 发布

SongYanJun2011

最新推荐文章于 2022-04-21 19:15:44 发布

阅读量7.4k

点赞数 1

分类专栏： JAVASCRIPT 文章标签： user 浏览器 xhtml border email ie

本文链接：https://blog.csdn.net/songyanjun2011/article/details/7175431

版权

JAVASCRIPT 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

为了避免无效数据的另一种方法是在用户录入数据时对无效输入进行屏蔽，例如在输入银行卡号时，要求用户必须输入数字，当用户输入非数字字符是，给出提示。

下面给出代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏蔽 非数字字符的输入</title>
<style>
body{ font:10px; }
span{ color:red; }
</style>
<script>
function is_number(e){
	//IE 中 Event 对象使用 keyCode 获得键入字符的 Unicode 编码
	//DOM 中 Event 对象 使用 charCode 获得键入字符的 Unicode 编码
	var char_code = e.charCode ? e.charCode : e.keyCode;
	//Unicode 编码中， 0~9 的编码的十进制 是 48~57 之间 ， 0为 48， 9 为57
	if(char_code<48 || char_code >57){
		alert("只允许输入数字");	
		return false;
	}
	else{
		return true;	
	}
}
</script>
</head>

<body>
<form name="user_info" method="post">
<table width="400" height="1" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td align="right">用户名：</td>
      <td align="left"><input type="text" name="user_name" size="15" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">密码：</td>
      <td align="left"><input type="password"	name="user_pwd" size="15" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">银行帐号：</td>
      <td align="left"><input type="text" name="user_account_no" size="15" οnkeypress="return is_number(event)" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">E-mail:</td>
      <td align="left"><input type="text" name="user_email" size="15" /><span>*</span></td>
  </tr>
  <tr>
      <td align="right">个人简介：</td>
      <td align="left"><textarea name="user_intro" cols="16" rows="5" ></textarea><span>*</span></td>
  </tr>
  <tr>
      <td align="right"></td>
      <td align="left"><input type="submit" value="提交" οnclick="return check_form()" /></td>
  </tr>
 </table>
</form>
</body>
</html>

以上代码中， is_number() 函数用于屏蔽非数字字符的输入。函数中，通过Event 对象的属性得到按下键的 Unicode 编码，对于 IE浏览器采用 keyCode 属性，而对于 DOM 浏览器采用 charCode 属性。在 Unicode 编码中， 0~9 的编码是 48~57（十进制）之间的连续值， 0 的编码是 48 ， 9的编码是 57，当按下键的编码超出 48~57 这个有效范围时，变为非数字字符。

说明：

IE浏览器没有 charCode 属性， keyCode 属性在 keypress 事件中得到与 DOM 中 charCode 属性相同的值，及按下键的 Unicode 编码。

is_number()函数被赋予银行账号文本框的onkeypress 事件句柄（按下键后放开时触发），当用户键入字符时，对键入的字符进行有效性的检测。如果检测到键入的字符为非数字字符，则返回 false。 keypress 事件的默认操作是在按键放开后键入字符，当 onkeypress 事件句柄得到 false 值时，便阻止默认操作即阻止字符的键入。

注意：

在将 is_number() 函数赋予 onkeypress 事件句柄时，注意使用 return 关键字，这样才能阻止非数字字符的键入。

Over！！！