首页 > Web开发 > 详细

JS实现表单输入Enter键转换焦点框

时间:2015-12-23 21:19:20      阅读:323      评论:0      收藏:0      [点我收藏+]
<form>
    <input type="text" onkeypress="return handleEnter(this, event)"><br>
    <input type="text" onkeypress="return handleEnter(this, event)"><br>
    <textarea onkeypress="return handleEnter(this, event)">回车切换焦点</textarea>
</form>
    <script type="text/javascript">
    function handleEnter (field, event) {
        var keyCode = event.keyCode ? event.keyCode : event.which ?
        event.which : event.charCode;
        if (keyCode == 13) {
            var i;
            for (i = 0; i < field.form.elements.length; i++)
                if (field == field.form.elements[i])
                break;
                i = (i + 1) % field.form.elements.length;
                field.form.elements[i].focus();
                return false;
        }
        else
        return true;
    }
</script>

 

jQuery版   相比存在一点缺陷   要求不严格的话可以用

$(function () {
        $(‘input:text:first‘).focus();
        var $inp = $(‘input:text‘);
        $inp.bind(‘keydown‘, function (e) {
            var key = e.which;
            if (key == 13) {
                e.preventDefault();
                var nxtIdx = $inp.index(this) + 1;
                $(":input:text:eq(" + nxtIdx + ")").focus();
            }
        });
    });

 

分析:
$(‘input:text:first‘).focus();
页面初始化时,焦点定位第一个文本框内


var $inp = $(‘input:text‘);  
取的type=文本框的元素集合


$inp.bind(‘keydown‘, function (e) {} 
给文本框集合绑定‘keydown‘事件


var key = e.which;       
取的当前按下的键值 比如Enter的键值=13


e.preventDefault();

JS实现表单输入Enter键转换焦点框

原文:http://www.cnblogs.com/samtrybest/p/5071234.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!