Question

我有两个文本字段的表单onLoad="document.forms.obrazac.sifra.focus()"我把光标放在第一个字段上。现在我想要当用户按下回车键将光标聚焦在第二个字段上然后再次按下回车时我想提交我的表格。我怎么能这样做，谢谢。

Answer 1

打破默认行为绝对不好。顺便问一下，你知道HTML中的autofocus属性吗？

如果你绝对需要这个，请转到：

document.forms.obrazac.onkeypress = function( e ) {
    // If the hit key is "Enter"
    if ( e.keyCode === 13 ) {

        // Cross-browser handling for our dear friend @MaxArt :p
        var evt = e || window.event,
            target = evt.target || evt.srcElement,

        // Find the next input
            nextInput = target.nextSibling;
        while ( nextInput.tagName !== 'INPUT' && nextInput.nextSibling ) {
            nextInput = nextInput.nextSibling;
        }

        // And focus it
        nextInput.focus();

        // Finally, disable submitting IF there is no input after
        if ( nextInput !== this.elements[ this.elements.length - 1 ] ) {
            return false;
        }
    }
};

Answer 2

只是简短而不真实的测试样本......只是为了给你一个想法：

<head>
    <script type="text/javascript">
    function onKeyPress(args)
    {
        if(args.keyCode === 13)
            document.getElementById("tb2").focus();
    }       
    </script>
</head>
<body>
    <input type="text" onkeypress="onKeyPress(event);" id="tb1" />
    <input type="text" id="tb2" />
</body>

您可以在tb2上执行相同操作，在“ENTER”上提交表单我还会使用类似jQuery的东西来绑定javascript中的事件，而不是直接在标记中绑定。

希望它有所帮助。

@as我已经开始创建我的样本，那里没有答案=）

Answer 3

我不打破默认行为，这对用户来说非常烦人且违反直觉，但如果你真的想这样做，你可以用jquery做这样的事情：

$('#form').keydown(function(e) {
    if( e.keyCode === 13) {  // When "Shift + Enter"
        e.preventDefault();
        // focus on next field here.
    }
});

而不是这样做，你最好只是制作正确的标签顺序（使用tabindex）：

<input type="text" name="field1" tabindex=1 /><br />

Answer 4

试试这个：

document.forms.obrazac.sifra.addEventListener("keyup", function(e) {
    if (e.keyCode === 13) { // 13 === enter key
        e.preventDefault();
        this.nextSibling.focus();
    }
});

记住这些事情：

我使用了addEventListener，但在IE8及更早版本中，您必须使用attachEvent("onkeyup"...并检查全局event对象。此外，e.preventDefault();变为e.returnValue = false;
我认为this.nextSibling是下一个字段。纠正这个以适合你。

在输入键上按下更改光标位置javaScript？

4 个答案: