JavaScript学习笔记6--阻止向文本框输入指定的字符

 我们给文本框指定一个新的属性invalidchars,凡是在invalidchars里的字符,都是不允许
输入的,怎样实现这个功能呢?看下面的例子:

< html >
  
< head >
    
< title > 阻止向文本框输入特定的字符 </ title >
    
< script  type ="text/javascript" >
    
function  blockChars(oTextbox,oEvent){
    
var  sInvalidChars = oTextbox.getAttribute( " invalidchars " );
    
if (oEvent.keyCode){ // 在IE环境下
      var  sChar = String.fromCharCode(oEvent.keyCode);
    }
    
else { // 非IE下
     var  sChar = String.fromCharCode(oEvent.charCode);
    }
    
var  bIsValidChar = sInvalidChars.indexOf(sChar) ==- 1 ;
    
return  bIsValidChar;
    }
    
    
</ script >
  
</ head >
  
< body >
    
< form  name ="f1"  id ="f1"  action =""  method ="post" >
      
< table  border ="0" >
        
< tr >
          
< td > Login: </ td >
          
< td >< input  type ="text"  name ="login"  id ="login"  invalidchars ="0123456789"  
               onkeypress
="return blockChars(this,event)"   />
          
</ td >
        
</ tr >
        
< tr >
          
< td > Password: </ td >
          
< td >< input  type ="password"  name ="password"  id ="password"  
          invalidchars
="abcdefghijklmnopqrstuvwxyz"  
          onkeypress
="return blockChars(this,event)"   />
          
</ td >
        
</ tr >  
        
< tr >
          
< td  colspan ="2"  align ="center" >< input  type ="submit"   /></ td >
        
</ tr >
      
</ table >
    
</ form >
  
</ body >
</ html >

 

上面的例子里,第一个文本框我们指定invalidchars的值为"0123456789",这样所有的数字
都会被阻止输入进去,第二个文本框里所有的小写字母都不允许输入进去。这里通过
blockChars来实现这个功能,blockChars函数有两个参数,第一个参数oTextbox引用文本框
对象,第二个参数是当前发生的事件对象,keypress事件属于键盘事件,当发生键盘事件时,
我们能够通过事件对象的keyCode属性(For IE)或者charCode属性(其他浏览器)获取当前按
键的Unicode值,然后可以通过String.fromCharCode()方法把Unicode值转化为对应的字符。
通过oTextbox的getAttribute()方法获取属性invalidchars的值,然后看当前按下的键盘键
值是否被包括在invalidchars的值里面,如果在,返回false,阻止字符的输入。否则,返回
true,允许输入。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值