跟随自己的心
Try My Best To Survive

2011年12月13日

读书笔记之文本输入过滤

  在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个事件。

posted @ 2011-12-13 12:05 BuddyFox 阅读(19) 评论(0) 编辑

2011年11月28日

JavaScript 性能之作用域

  在Javascript中,document.getElementById()是极其常用的方法。

<div id="check_by">
<input type="checkbox"  id="free" onclick="check_by()" />                      
<input type="checkbox"  id="is_cod" onclick="check_by()" />
<input type="checkbox"  id="is_door" onclick="check_by()" />
</div>


function check_by()
{
     var free     =       document.getElementById("free");
     var is_cod   =     document.getElementById("is_cod");
     var is_door  =    document.getElementById("is_door");
}

 但是,在一个函数里面需要多次使用该方法时,每次都从document的作用域链去遍历无疑会消耗较多的内存。所以,在需要多次使用该方法时,可以将要得到的节点归类为一个集合,得到集合(nodelist或者collection),然后从集合中去获取所需的节点。

function check_by()
{
     var list=document.getElementById("check_by").childNodes;   
   var free     =  list[0];
     var is_cod   =  list[1];
   var is_door  =  list[2];
}

  只需一次从document作用域链去遍历。

posted @ 2011-11-28 12:46 BuddyFox 阅读(12) 评论(0) 编辑

  

导航

统计

公告

So fast!