如何让PrimeFaces.current().focus()聚焦到不可见但启用的输入组件？

问题背景 #

我需要对用户不可见的UI组件使用PrimeFaces.current().focus()方法，但该方法仅适用于启用的非按钮类输入字段。我的场景较为特殊，需要为一个对用户不可见但实际为启用状态的输入元素显示消息。尝试使用display:none隐藏输入框后，focus()方法无法生效，代码如下：

<div class="ui-g-12">
    <h:inputText style="display:none;" id="fakeInputId"/>
    <p:message for="fakeInputId">
        <p:autoUpdate/>
    </p:message>
</div>

解决方案 #

display:none会将元素从文档流中完全移除，浏览器无法对这类元素执行焦点操作，因此需要改用视觉隐藏但保留交互能力的CSS方案。

1. 定义视觉隐藏CSS类

添加以下CSS到项目样式文件：

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

这是无障碍设计领域的标准视觉隐藏样式，既保证元素在视觉上完全不可见，又保留了其在文档流中的交互能力。

2. 修改输入框代码

将原代码中的style="display:none"替换为styleClass="visually-hidden"：

<div class="ui-g-12">
    <h:inputText styleClass="visually-hidden" id="fakeInputId"/>
    <p:message for="fakeInputId">
        <p:autoUpdate/>
    </p:message>
</div>

原理说明

• 绝对定位使元素不占用页面布局空间，不会干扰其他组件的正常显示
• 1px尺寸配合负margin让元素在视觉上彻底消失
• clip: rect(0,0,0,0)和overflow:hidden确保元素内容不会意外溢出显示
• 元素始终保持启用状态，完全满足PrimeFaces.current().focus()对目标元素的要求

内容的提问来源于stack exchange，提问作者Alex Mi