当用户在表单中填写完当前字段后,能否自动将焦点跳转到下一个字段以方便用户输入?

  为了增强易用性,加快数据输入的速度,可以在前一个文本框中的字符达到一定的设置的字符长度后(比如电话号码,身份证号等),用户输入完后,自动将焦点切换到下一个文本框中。可以使用JS来实现这一功能。

  思路:首先,比较用户输入的值和文本框中的maxlength特性,确定是否达到了指定的长度(或者允许输入的最大长度),如果这两个值相等,就去查找表单字段的集合,找到下一个文本框,将焦点切换到该文本框中。

代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS自动切换焦点</title>
<script type="text/javascript">
window.onload = function(){
var EventUtil = { addhandler:function(element,type,handler){
if(element.addEventListenter){
element.addEventListenter(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
/*
该方法返回Event对象的引用,考虑到IE中对事件的位置的不同,可以使用这个方法取得Event对象。
*/
getEvent: function(event){
return event ? event: window.event;
},
//返回事件的目标
getTarget: function(){
return event.target || event.srcElement;
},
/*通过比较用户输入的值与文本框的maxlength特性,确定是否达到最大长度
当两个值相等时,则需要查找表单字段的集合,查找到下一个文本框后将焦点切换
*/
preventDefault: function(){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation: function(){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBuddle = true;
}
},
removehandler: function(element,type,handler){
if(element.removeEventListenter){
element.addEventListenter(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on" +type] = null;
}
},
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
},
//处理字符编码
} var textarea = document.forms[0].elements["text"];
var button = document.getElementById("button"); (function(){
function tabForward(event){ //event事件对象传到事件处理程序中去
event = EventUtil.getEvent(event); //把event传给getEvent()方法
var target = EventUtil.getTarget(event); if(target.value.length == target.maxLength) { //达到最大长度
var form = target.parentElement; for(var i=0, len=form.elements.length; i<len-1; i++)
{
if(form.elements[i] == target){
form.elements[i+1].focus(); //切换焦点
return;
}
}
}
}
var textName = document.getElementById("textName");
var textTel = document.getElementById("textTel");
var textID = document.getElementById("textID"); EventUtil.addhandler(textName,"keyup",tabForward); //在用户输入新字符后触发keyup事件
EventUtil.addhandler(textTel,"keyup",tabForward);
EventUtil.addhandler(textID,"keyup",tabForward);
})();
}
</script>
</head> <body>
<form>
<input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名"/>
<input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码"/>
<input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID"/> </form>
</body>
</html>

对于这段代码中32到55行的作用,不懂,请看懂的人解释一下,thanks!

参考自:javascript高级程序设计。

  

04-26 14:07
查看更多