在页面加载时将焦点设置到特定的 JSF inputText答案

【问题标题】：Set focus to specific JSF inputText on page load在页面加载时将焦点设置到特定的 JSF inputText
【发布时间】：2011-03-09 13:34:39
【问题描述】：

我想在页面加载时将焦点设置在 JSF 中的 inputText 字段上。我该如何实现？

【问题讨论】：

标签： jsf focus

【解决方案1】：

如果您已经使用 HTML5 和 JSF 2.2，请使用 HTML5 autofocus 属性。在 JSF 2.2 中，您可以将其设置为 passthrough attribute。

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

您甚至可以有条件地设置它，您只需要确保false 条件的计算结果为null，否则仍然会呈现该属性。它是一个 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()
});

如果您打算仅在回发后执行，请前往以下相关问答：

实用程序/组件库可能具有内置的自动对焦功能。 OmniFaces 有一个 <o:highlight>，它突出显示回发时的所有无效输入并自动聚焦第一个。 PrimeFaces 默认情况下会在完成 ajax 请求时自动聚焦“最后一个活动”元素，并有一个 <p:focus> 用于更细粒度的控制。另请参阅下面的相关问答：

OmniFaces highlight does not set focus with <p:ajax>

【讨论】：

【解决方案2】：

如果您使用 primefaces，您可以像这样集中输入：

<p:focus for="inputId"/>

【讨论】：

请注意，在 panelGrid 中使用它会弄乱定位... 将其放在外面... 但是它似乎必须在相同的表格内或其他东西内，所以也要注意这一点...