Как сохранить фокус в элементе ввода, где была нажата Enter для отправки формы - PullRequest
1 голос
/ 29 сентября 2011

Форма содержит элементы ввода и кнопку отправки. Нажатие кнопки «Отправить» показывает файл 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');
        });

Ответы [ 2 ]

2 голосов
/ 29 сентября 2011

Если вы хотите вернуться к последнему сфокусированному предмету, я думаю, вам нужно будет отслеживать последний сфокусированный предмет.

Что-то вроде этого, вероятно, достигнет того, что вы ищете:

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

2 голосов
/ 29 сентября 2011

Или, так как вы уже используете jQuery, возможно, вы могли бы также использовать эту простую функцию, чтобы установить фокус на отправке:

$(function() {

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

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

    });

});

Таким образом, фокус будет установлен на "#test", как только форма будет отправлена.

Демо: http://jsfiddle.net/vZSZT/

Edit:

Чтобы вернуться к тому, что было при отправке формы, я, вероятно, сделал бы это следующим образом:

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

Тем не менее, путь Кристоффера, кажется, тоже хорош (и, возможно, даже лучше? Я не могу сказать), но оба будут работать :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...