读书笔记之文本输入过滤

最新推荐文章于 2020-12-20 12:54:25 发布

weixin_30511039

最新推荐文章于 2020-12-20 12:54:25 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/buddyfox/archive/2011/12/13/2285870.html

在HTML中，当文本框中的内容只能是某一部分字符时，我们可以通过控制输入来保证只能输入我们想要的内容，直接在按键的时候进行过滤。

很常见的一个需求：在电话号码输入框，我们只允许输入数字时，我们对所有非数字输入进行过滤。

//创建文本框

//<input type="text" id="t1" onkeypress="num_only(event)" onpaste="paste(event)" onchange="change(event)" />

//-------------键盘事件 
 
//获取键盘输入

function getCharCode (event)
{
　　if(typeof event.charCode=="number")
　　{
　　　　return event.charCode;
　　}
　　else
　　{
　　　　return event.keyCode;
　　}
}

//获取当前事件

function getEvent (event)
{
　　return event?event:window.event;
}

//获取当前事件的对象

function getTarget (event)
{
　　return event.target||event.srcElement;
}
//阻止事件发生
function preventDefault(event)
{
　　if(event.preventDefault)
　　{
　　　　event.preventDefault();
　　}
　　else
　　{
　　　　event.returnValue=false;
　　}
}

//通过模式/[1-9]/对输入进行匹配。

//触发事件 keypress

function num_only(event)
{

　　var target=getTarget(event);//事件对象
　　var charcode=getCharCode(event);
　　if(!/[1-9]/.test(String.fromCharCode(charcode))&&charcode>9&&!event.ctrlKey&&!event.shiftKey)
　　{
　　　　preventDefault(event);
　　}
　　else
　　{
　　　　//事件处理
　　}
}

//上面是键盘的输入部分
//文本输入还可以通过剪贴板输入,因此有必要对粘贴操作进行过滤
//-------------事件 onpaste 
//获取当前剪切板过来的内容

function getClipboardText(event)
{
　　var clipboardData = (event.clipboardData || window.clipboardData);
　　return clipboardData.getData("text");
}

//粘贴事件程序处理 

function paste(event)
{
　　var data=getClipboardText(event);
　　if(!/^\d*$/.test(data))
　　{
　　　　preventDefault(event);
　　}
}

//在keypress事件发生时，上面的代码只能控制英文字符的输入，对于中文无能为力。

//但是在keyup事件发生时，字符已经出现在文本框，可以通过取值对输入的字符进行过滤。

onkeyup="this.value=this.value.replace(/\D/g,'');"

或者//onkeyup="change(event)"

function change(event)
{
　　var target=getTarget(event);
　　var val=target.value;
　　var pattern=/[1-9]/g;
　　var val_new="";

　　while(matches=pattern.exec(val))
　　{
　　　　val_new=val_new+matches[0];
　　} 
　　target.value=val_new;
}

//上述2个事件函数支持事件冒泡，直到document层次。如果该类型事件处理程序过多，可以只指定一个事件处理程序，就可以管理某一类型的事件。

<table>
<tr><input type="text" onkeyup="change(event)" onkeypress="num_only(event)"/></tr>

<tr><input type="text" onkeyup="change(event)" onkeypress="num_only(event)"/></tr>

<tr><input type="text" onkeyup="change(event)" onkeypress="num_only(event)"/></tr>

<tr><input type="text" onkeyup="change(event)" onkeypress="num_only(event)"/></tr>

<tr><input type="text" onkeyup="change(event)" onkeypress="num_only(event)"/></tr>

<tr><input type="text" onkeyup="change(event)" onkeypress="num_only(event)"/></tr>

<tr><input type="text" onkeyup="change(event)" onkeypress="num_only(event)"/></tr>

</table>

　上面的每个input 都加上了2个事件，我可以直接给<table> 加上2个事件，下面input 触发 keypress 和keyup 事件会冒泡到table 触发事件，event 取得触发事件的对象，执行函数。　

<table onkeyup="change(event)" onkeypress="num_only(event)">
<tr><input type="text" /></tr>
<tr><input type="text" /></tr>
<tr><input type="text" /></tr>
<tr><input type="text" /></tr>
<tr><input type="text" /></tr>
<tr><input type="text" /></tr>
<tr><input type="text" /></tr>
</table>

　　这就不用去给每个input 加上2个事件。

转载于:https://www.cnblogs.com/buddyfox/archive/2011/12/13/2285870.html