注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

JS 屏蔽非数字字符的输入  

2012-12-14 15:59:47|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

下面给出代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>屏蔽 非数字字符的输入</title>  
  6. <style>  
  7. body{ font:10px; }  
  8. span{ color:red; }  
  9. </style>  
  10. <script>  
  11. function is_number(e){  
  12.     //IE 中 Event 对象使用 keyCode 获得键入字符的 Unicode 编码  
  13.     //DOM 中 Event 对象 使用 charCode 获得键入字符的 Unicode 编码  
  14.     var char_code = e.charCode ? e.charCode : e.keyCode;  
  15.     //Unicode 编码中, 0~9 的编码的十进制 是 48~57 之间 , 0为 48, 9 为57  
  16.     if(char_code<48 || char_code >57){  
  17.         alert("只允许输入数字");     
  18.         return false;  
  19.     }  
  20.     else{  
  21.         return true;      
  22.     }  
  23. }  
  24. </script>  
  25. </head>  
  26.   
  27. <body>  
  28. <form name="user_info" method="post">  
  29. <table width="400" height="1" border="0" cellpadding="0" cellspacing="0">  
  30.   <tr>  
  31.       <td align="right">用户名:</td>  
  32.       <td align="left"><input type="text" name="user_name" size="15" /><span>*</span></td>  
  33.   </tr>  
  34.   <tr>  
  35.       <td align="right">密码:</td>  
  36.       <td align="left"><input type="password"  name="user_pwd" size="15" /><span>*</span></td>  
  37.   </tr>  
  38.   <tr>  
  39.       <td align="right">银行帐号:</td>  
  40.       <td align="left"><input type="text" name="user_account_no" size="15" onkeypress="return is_number(event)" /><span>*</span></td>  
  41.   </tr>  
  42.   <tr>  
  43.       <td align="right">E-mail:</td>  
  44.       <td align="left"><input type="text" name="user_email" size="15" /><span>*</span></td>  
  45.   </tr>  
  46.   <tr>  
  47.       <td align="right">个人简介:</td>  
  48.       <td align="left"><textarea name="user_intro" cols="16" rows="5" ></textarea><span>*</span></td>  
  49.   </tr>  
  50.   <tr>  
  51.       <td align="right"></td>  
  52.       <td align="left"><input type="submit" value="提交" onclick="return check_form()" /></td>  
  53.   </tr>  
  54.  </table>  
  55. </form>  
  56. </body>  
  57. </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!!!

  评论这张
 
阅读(468)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017