Question

表单包含输入元素和提交按钮。按“提交”按钮会在浏览器的新选项卡中显示pdf文件。如果按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

或者既然你已经在使用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 2

如果你想回到最后一个重点项目，我想你需要跟踪最后一个重点项目。

这样的事情可能会达到你想要的目的：

$(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 3

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

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

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

3 个答案: