码迷,mamicode.com
首页 > 移动开发 > 详细

表单文本框光标自动移动到下一个文本框内

时间:2014-09-20 17:36:19      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   java   ar   for   div   sp   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jstest</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    
    <form id="myForm" name="yourForm">
        <input type="text" name="a1" id="a1" value="" maxlength="1" />
        <input type="text" name="a1" id="a1" value="" maxlength="3" />
        <input type="text" name="a1" id="a1" value="" maxlength="5" />
        姓名:<input type="text" name="user" value="text" /><br />
        <textarea name="content" rows="" cols="" style="width: 200px;">dsfsafsdafdsafdf dsfsd</textarea>
    </form>
    
</body>
</html>
//跨浏览器添加事件
function addEvent(obj,type,fn){
    if(obj.addEventListener){
        obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){
        obj.attachEvent(‘on‘+type,fn);
    }
}

addEvent(window,‘load‘,function(){
    var fm = document.forms[‘yourForm‘];
    var user = fm.elements[‘user‘];
    var content = fm.elements[‘content‘];
    
    addEvent(fm.elements[‘a1‘],‘keyup‘,tabForWard);
    addEvent(fm.elements[‘a2‘],‘keyup‘,tabForWard);
    addEvent(fm.elements[‘a3‘],‘keyup‘,tabForWard);
    
    function tabForWard(evt){
        var e = evt || window.event;
        //判断当前的长度是否和已输入的长度是否一致
        if(this.value.length == this.maxLength){
            //遍历所有控件
            for(var i = 0; i< fm.elements.length; i++){
                if(fm.elements[i] == this){
                    fm.elements[i+1].focus();
                    return;
                }
            }
        }
    }
    
});

 

表单文本框光标自动移动到下一个文本框内

标签:style   blog   color   io   java   ar   for   div   sp   

原文地址:http://www.cnblogs.com/littlefly/p/3983328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!