如何仅在浏览器窗口满足指定尺寸时启用PrimeFaces <p:focus>组件？

直接通过服务端rendered属性控制不太现实，因为服务端默认无法获取客户端窗口尺寸。不过可以结合客户端JS和PrimeFaces特性实现需求，既保留桌面端自动聚焦，又能利用组件原生的验证失败聚焦无效组件功能：

方案一：动态控制组件激活状态（推荐） #

1. 页面中正常引入<p:focus>，无需用rendered限制渲染：

<p:focus id="focusWidget" widgetVar="focusWidget" />

2. 借助PrimeFaces客户端API，在页面加载和窗口 resize 时切换组件状态：

$(function() {
    toggleFocus();
    // 监听窗口尺寸变化，实时调整
    $(window).resize(toggleFocus);
});

function toggleFocus() {
    const focusComponent = PF('focusWidget');
    if ($(window).width() > 480) {
        // 桌面端：启用组件，触发初始聚焦+保留验证失败聚焦逻辑
        focusComponent.enable();
        focusComponent.focus();
    } else {
        // 移动端：禁用组件，避免自动聚焦
        focusComponent.disable();
    }
}

这个方案无需服务端交互，响应快，且完整保留<p:focus>的原生能力。

方案二：AJAX传尺寸到服务端控制渲染 #

如果一定要用服务端rendered属性，需要先把客户端窗口尺寸传给后台：

1. 页面加载/resize时通过AJAX传递尺寸：

$(function() {
    syncWindowSize();
    $(window).resize(syncWindowSize);
});

function syncWindowSize() {
    const width = $(window).width();
    PrimeFaces.ab({
        source: 'form:sizeSyncBtn',
        process: '@this',
        params: [{name: 'windowWidth', value: width}]
    });
}

2. 后台Bean接收并存储尺寸：

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import java.io.Serializable;

@Named
@ViewScoped
public class FormBean implements Serializable {
    private int windowWidth;

    public void setWindowWidth(int windowWidth) {
        this.windowWidth = windowWidth;
    }

    public boolean isFocusEnabled() {
        return windowWidth > 480;
    }
}

3. 页面用rendered属性控制组件：

<p:focus rendered="#{formBean.focusEnabled}" />

此方案需要处理AJAX请求，页面初始加载可能存在渲染延迟，性能不如方案一。

注意事项 #

• 方案一中的PF('focusWidget')依赖组件的widgetVar属性，需确保和组件定义一致；若未设置widgetVar，默认使用组件id。

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