Установите фокус на конкретный входной текст JSF на загрузке страницы

Я хочу установить фокус на поле inputText в JSF при загрузке страницы. Как это реализовать?

Ответ 1

Если вы уже используете HTML5 и JSF 2.2, используйте атрибут HTML5 autofocus. В JSF 2.2 вы можете установить его как атрибут passthrough.

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText ... a:autofocus="true" />

Вы даже можете условно установить его, вам нужно только убедиться, что условие false оценивается как null, в противном случае атрибут все равно будет отображаться. Это атрибут boolean HTML, поэтому его присутствие уже является триггером независимо от его значения. Когда значение явно установлено на null, тогда JSF не будет отображать атрибут целиком.

<h:inputText ... a:autofocus="#{component.valid ? null : true}" />

Альтернативой было бы бросить какой-то JavaScript. Каждый элемент ввода имеет функцию focus(). Нижеследующий наивный подход Vanilla JS фокусирует первый элемент первой формы.

window.onload = function() {
    document.forms[0].elements[0].focus();
}

Если вы хотите сфокусировать определенный элемент ввода во время загрузки окна, выполните следующие действия:

window.onload = function() {
    document.getElementById('formId:inputId').focus();
}

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

$(document).ready(function() {
    $(":input:visible:enabled:first").focus()
});

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

Утилиты/библиотеки компонентов могут иметь встроенные средства автоматической фокусировки. OmniFaces имеет <o:highlight>, который подчеркивает все недопустимые входы для обратной передачи и автофокусировки первого. PrimeFaces по умолчанию автофокусирует элемент "последний активный" при выполнении запроса ajax и имеет <p:focus> для более мелкозернистого управления. См. Также ниже раздел Q & A:

Вспышка OmniFaces не устанавливает фокус с помощью < p: ajax >

Ответ 2

Если вы используете примитивы, вы можете сфокусировать свой ввод следующим образом:

<p:focus for="inputId"/>