JS 屏蔽非数字字符的输入

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

下面给出代码:

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




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值