如何将焦点保持在按 Enter 提交表单的输入元素上

Question

表单包含输入元素和提交按钮。按“提交”按钮会在浏览器的新选项卡中显示 pdf 文件。 如果按 Enter 键显示报告，焦点将移至提交按钮。选择报告参数标记后，需要再次单击输入元素才能向同一元素输入新值。

如何在按下 Enter 的位置保持焦点输入元素？

<form id="Form" class='form-fields' method='post' target='_blank'
action='Render'>

<input id='test' name='test' value='test' /> 
...
  <input id='_submit' type='submit' value='Show report' /> 
</form>

使用jquery、jqueryui、asp.net mvc2。

更新

我在表单中有 2 个具有相同名称的元素，以允许未选中的复选框提交：

<input type='hidden' value='false' name='Summary' />
<input type='checkbox' id='Summary' name='Summary' checked />
<select class="ui-widget-content ui-corner-all" id="_Report" name="_Report" size="10">
<option value="LV001">Report1</option>
<option value="LV003">Report2</option>
<option selected="selected" value="LV009">Report3</option>
</select>

我按照评论中的建议尝试了下面的代码。如果焦点位于复选框中，则不会恢复焦点。相反，选择元素是焦点。如何修复？

        $("#Form input:not([type=submit]), textarea, select").focus(function () {
            $('input').removeClass('hasFocus');
            $(this).addClass('hasFocus');
        });

Answer 1

如果您想返回到最后一个焦点项目，我认为您需要跟踪最后一个焦点项目。

像这样的东西可能会实现你正在寻找的东西：

$(function() {
    var lastFocus = [];

    $('#Form').find(':text,:radio,:checkbox,select,textarea').focus(function() {
        lastFocus = $(this);
    });

    $('#Form').submit(function(){    
        if (lastFocus.length == 1)
            lastFocus.focus();

        // just to prevent the actual submit - remove this to enable submit
        return false;
    });
});

我还制作了一个jsfiddle来测试： http://jsfiddle.net/ Jht6C/

Answer 2

或者，由于您已经在使用 jQuery，您也可以使用这个简单的函数将焦点设置在提交上：

$(function() {

    $('#Form').submit(function(){    

        $('#test').focus();

    });

});

这样，一旦提交表单，焦点就会设置为“#test”。

演示： http://jsfiddle.net/vZSZT/

编辑：

将焦点返回到表单时的位置已提交，我可能会这样做：

$(function() {

    //Lets make sure we dont target the submit-input
    $("input:not([type=submit])").focus(function () {

        //Remove previous focused inputs
        $('input').removeClass('hasFocus');    

        //Add focus class to this input
        $(this).addClass('hasFocus');

    });


    $('#Form').submit(function(){    

        $('.hasFocus').focus();


    });

});

演示：http://jsfiddle.net/vZSZT/4/

然而，Christoffer 的方式似乎也不错（甚至可能更好？我不知道），但两者都会起作用:)

Answer 3

实际上，有一个简单的解决方案可以在表单提交后聚焦。将关键字 autofocus 作为属性添加到输入元素。

<input id='test' name='test' value='test' autofocus>