Настройка фокуса на скрытое поле текстового поля с помощью Javascript

Как установить фокус на скрытый элемент текстового поля?

Я попытался использовать

document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus;

Но здесь это не работает.

alert(document.activeElement.id); returns null.

Когда я сделал это поле видимым, выше script работал нормально.

Любые догадки, где я ошибаюсь?

Ответ 1

Если вам действительно нужно это сделать, сделайте поле прозрачным, а не скрытым:

opacity:0;
filter:alpha(opacity=0);

В качестве альтернативы, если вы хотите, чтобы пользователь не случайно щелкнул по нему, просто поместите ввод в div с помощью

width: 0;
overflow: hidden;

Однако, безусловно, лучший способ сделать то, что вы хотите, возможно, используя события keydown/keypress.

Ответ 2

Я не думаю, что это разрешено, по крайней мере, в IE. Я получил эту информацию на странице jQuery focus.

Ответ 3

Используя Apsillers, моя настройка для этой же ситуации:

родительский div с позицией: relative;
позиция элемента дочерней формы: абсолютная; Z-индекс: 0; Непрозрачность: 0; Фильтр: альфа (непрозрачность = 0);
вторая позиция дочернего элемента: абсолютная; z-index: (значение > 0) (позиционируется для покрытия прозрачного ввода).

Ответ Aspillers правильный, учитывая заданный вопрос, но я хотел дать практический пример того, когда это необходимо.

В частности, элементы формы могут быть скрыты, если вы используете какой-либо script/плагин, который делает "причудливые" входы (т.е. элементы радио/проверки, элементы выбора). Но если ваш script или плагин написан плохо, он может исключить доступ к клавиатуре. Сохранение потока формы, позволяя всем элементам сосредоточиться, может сэкономить много головных болей для пользователей сайта.

Ответ 4

Вы можете добавить некоторые js, если вам нужно обходное решение, и не может изменить непрозрачность attr.

/* bind a click handler to your trigger */
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) {
    /* in case your field is fading, cheat a little (check css transition duration) */
    setTimeout ( function timeoutFunction () {
        /* show the cursor */
        jQuery('#your-search-input').focus();
    }, 100);
});