可以访问 这里 查看更多关于大数据平台建设的原创文章。
使用Javascript可以从多个方面增强表单字段的易用性。其中,最常见的一种方式就是在用户填写完当前的字段(文本框)时,自动将焦点切换到下一个字段(文本框)。
要实现这个功能必须知道用户输入了既定长度的数据(例如电话号码)。例如美国的电话号码通常分为三部分:区号,局号和另外4位数字。为了取得完整的电话号码,很多网页中都会提供下列3个文本框:
<input type="text" name="tel1" id="txtTel1" size="3" maxlength="3" />
<input type="text" name="tel2" id="txtTel2" size="3" maxlength="3" />
<input type="text" name="tel3" id="txtTel3" size="4" maxlength="4" />
当用户在第一个文本框中输入了3个数字后,焦点就会自动切换到第二个文本框,再输入3个数字,焦点又会切换到第三个文本框。这种自定切换焦点的功能,可以通过下列代码实现:
<script type="text/javascript">
(function(){
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(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(event){
return event.target || event.srcElement;
}
};
/*通过比较用户输入的值与文本框的maxlength特性,可以确定是否已经达到最大长度
*当这两个值相等时,则需要查找表单字段集合,直到直到下一个文本框,找到下一个文本框后,则将焦点切换到该文本框
*/
function tabForward(event){ // event事件对象传到事件处理程序中去
event = EventUtil.getEvent(event); // 把event传给getEvent()方法
var target = EventUtil.getTarget(event);
if (target.value.length == target.maxLength){ // 确定是否已经达到最大长度
var form = target.form;
for (var i=0, len=form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
form.elements[i+1].focus(); //将焦点切换到下一个文本框
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward); // keyup事件会在用户输入了新字符之后触发
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();
</script>
keyup事件会在用户输入了新字符之后触发 ,所以此时是检测文本框内容长度的最佳时机,这样一来,用户在填写这个表单时,就实现了自动切换焦点。
注:有关EventUtil对象的相关不是太清楚的可以看我上篇文章(http://www.cnblogs.com/itdream/archive/2012/06/01/2530747.html)。
参考:Javascript高级程序设计(第2版)
更多文章
欢迎访问 webpack 系列原创文章:
关注微信公众号
欢迎大家关注我的微信公众号阅读 更多 原创文章: