Form表单基础知识和常用兼容方法笔记（二）

接到上一节讲文本框脚本

过滤输入（屏蔽字符和操作剪贴板）

 

在此之前需要用到两个兼容的方方法

var ev={
//添加事件监听
        addEvent:function(obj,evt,fun){
            if(obj.addEventListener){//for dom
                  obj.addEventListener(evt,fun,false)
            }
            else if(obj.attachEvent){//for ie
                   obj.attachEvent("on"+evt,fun)
                  //obj.attachEvent("on"+evt,function(){fun.call(obj)});//解决IE attachEvent this指向window的问题
            }
            else{obj["on"+evt] = fun}//for other
        },
    //捕获事件        
         getEvent:function(){
                  if(window.event){return window.event}
                  else{return ev.getEvent.caller.arguments[0];}    
         },
//获取事件源  
          getTarget: function(event) {  
              return event.target || event.srcElement;  //ie
          },
//跨浏览器取得键盘字符编码 只有在keypress事件下有数值
          getCharCode:function(event){
              if(typeof event.charCode == 'number'){
                return event.charCode;//ie opera
              }else{
                return event.keyCode;//返回键码
              }
          },
//阻止默认事件比如a链接跳转  
         preventDefault: function(event) {  
              if (event.preventDefault) {  
                  event.preventDefault();  
              } else {  
                  event.returnValue = false;  //ie
              }  
          },
}

这是base.js 里面的两个方法 
 

首先屏蔽字符：电话号码要求只输入数字:

//屏蔽非数字键的输入
    ev.addEvent(,'keypress',function(event){
        ev.getEvent(event);
        var charCode=ev.getCharCode(event);
        // alert(String.fromCharCode(charCode)) 把charCode 转化成键盘上的字符
        if(!/\d/.test(String.fromCharCode(charCode)) && charCode>0){  //键盘上的退格键，删除键，等操作键的charCode 都是0
            ev.preventDefault(event)                  //如果不是数字 则取消默认行为
        }
    })
    ev.addEvent(textFiled,'keyup',function(){
        this.value=this.value.replace(/[^\d]/g,'');  //如果输入的汉字 则替换为空
    })

 

剪贴板事件

Beforecopy:在发生复制操作前触发

Copy:在发生复制操作时触发

Beforecut:在发生剪切操作前触发

Cut: 在发生剪切操作时触发

Beforepaste: 在发生粘贴操作前触发

Paste: 在发生粘贴操作时触发

 

这些属性在各个浏览器中访问的标准并不一样，

要访问剪贴板中的数据可以用clipboardData对象，在ie中这个属于window对象在其他浏览器中属于event对象

这个对象包括三个方法：getData(),setData(),clearData();

为了让这些对象方法在各个浏览器中都兼容

再此作如下兼容加入到

//取得剪贴板里的数据 只能在onpaste事件中使用 clipboardData对象是访问剪贴板里的数据 该两个方法添加到base
       getClipboardText：function(event){
          var clipboardData = (event.clipboardData||window.clipboardData)
          return clipboardData.getData('text');
        },
         //设置剪贴板里的数据
        setClipboardData：function(event){
            if(event.clipboardData){
              return event.clipboardData.setData('text/plain',value);
            }else if(window.clipboardData){
              return event.clipboardData.setData('text',value);
            }
         }


//调用

ev.addEvent(textbox,'paste',function(event){

         var event=ev.getEvent(event);

         //ev.preventDefault(event)            //阻止粘贴

       var test = ev.getClipboardText(event))   //返回要被粘贴的text

 if(!/^\d*$/.test(text)){      如果不匹配就组织行为
    ev.preventDefault(event);
    }

自动切换焦点

通常我们输入密钥的时候，输入几个字母或数字 焦点就直接跳转到下个文本框中。

输入电话号码也是一样样。下面我们就这做一个例子：

html:

<input type="text" name='tel1' id="txtTel1" maxlength="3">
<input type="text" name='tel2' id="txtTel2" maxlength="3">
 <input type="text" name='tel3' id="txtTel3" maxlength="4">

 

//焦点自动切换
function tabFoward(event){
        var event=event||window.event;
         var target=event.target || event.srcElement;
         if(target.value.length==target.maxLength){       
             var form=target.form;
             for(var i=0;i<form.elements.length;i++){             
                 if(form.elements[i]==target){                    
                     if(form.elements[i+1]){
                         form.elements[i+1].focus();
                     }
                     return;
                 }
             }
         }
    }


调用：
var textbox1=document.getElementById("txtTel1");
var textbox2=document.getElementById("txtTel2");
var textbox3=document.getElementById("txtTel3");

ev.addEvent(textbox1,'keyup',tabFoward);
ev.addEvent(textbox2,'keyup',tabFoward);
ev.addEvent(textbox3,'keyup',tabFoward);