接到上一節講文本框腳本

過濾輸入（屏蔽字符和操作剪貼板）

?

在此之前需要用到兩個兼容的方方法var ev={ //添加事件監聽addEvent:function(obj,evt,fun){if(obj.addEventListener){//for domobj.addEventListener(evt,fun,false)}else if(obj.attachEvent){//for ieobj.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 都是0ev.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對象是訪問剪貼板里的數據 該兩個方法添加到basegetClipboardText：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);

?

轉載于:https://www.cnblogs.com/yoyoqd0512/p/4773493.html

總結

以上是生活随笔為你收集整理的Form表单基础知识和常用兼容方法笔记（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。