开发者

How to keep focus in input element where Enter was pressed to submit form

开发者 https://www.devze.com 2023-04-09 03:55 出处:网络
Form contains input elements and submit button. Pressing Submit button shows pdf file in new tab in browser.

Form contains input elements and submit button. Pressing Submit button shows pdf file in new tab in browser. If enter is pressed to show report, focus moves to submit button. After selection report parameters tag again additional click in input element is required to enter new value to same element.

How to keep focus input element where enter was pressed ?

<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 are used.

update

I have 2 elements with same name in form to allow unchecked checkbox submission:

<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>

I tried code below as suggested in comment. If focus is in checkbox, it focus is开发者_如何学Python not restored. Instead select element is focused. How to fix ?

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


If you want to get back to the last focused item, I think you will need to keep track on the last focused item.

Something like this will probably achieve what you are looking for:

$(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;
    });
});

I also made a jsfiddle to test: http://jsfiddle.net/Jht6C/


Or since you are already using jQuery, you could probably also use this simple function to set focus on submit:

$(function() {

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

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

    });

});

This way focus will be set to "#test" as soon as the form is submitted.

Demo: http://jsfiddle.net/vZSZT/

Edit:

To get focus back to where it was when form was submitted, I would probably do it this way:

$(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();


    });

});

Demo: http://jsfiddle.net/vZSZT/4/

However, Christoffer´s way seems to be good too (and probably even better? I cant tell), but both will work :)


Actually, there is a simple solution for focusing after form submit. Add the keyword autofocus as an attribute to the input-element.

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

精彩评论

暂无评论...
验证码 换一张
取 消