为什么 jsf <h:inputHidden../> 在屏幕上占用空间？

Question

在我屏幕上的大多数 primefaces 组件中，我碰巧在我的 xhtml 页面上使用了 h:inputHidden，因为我需要一个隐藏字段来存储/更新 bean 字段值。

<h:inputHidden id="calendarValueHidden" value="#{myCdiBean.calValue}"/>

即使它不可见，但我不知道为什么它会占用屏幕上的空间，从而干扰了页面的其他组件。甚至display:none !important 也无法处理输入隐藏组件。

Answer 1

问题症状表明一个常见的初学者错误：将其声明为<h:panelGrid> 的直接子代。像这样：

<h:panelGrid columns="1">
    <h:inputText ... />
    <h:inputText ... />
    <h:inputHidden ... />
    <h:inputText ... />
</h:panelGrid>

<h:panelGrid> 生成 HTML <table> 和 as documented，它会将 每个直接子代 放入自己的表格单元格 <td>。生成的 HTML 输出如下所示：

<table>
    <tbody>
        <tr><td><input type="text" /></td></tr>
        <tr><td><input type="text" /></td></tr>
        <tr><td><input type="hidden" /></td></tr>
        <tr><td><input type="text" /></td></tr>
    </tbody>
</table>

<td> 默认有一些边距和填充，这完全解释了你的问题。在浏览器的内置开发人员工具集中检查 HTML 输出和 CSS 样式时，您应该已经注意到了（按 F12 或右键单击，检查元素）。

您基本上希望将<h:inputHidden> 与所需的<h:inputText> 组合在同一个表格单元格中。你可以使用<h:panelGroup>。

<h:panelGrid columns="1">
    <h:inputText ... />
    <h:panelGroup>
        <h:inputText ... />
        <h:inputHidden ... />
    </h:panelGroup>
    <h:inputText ... />
</h:panelGrid>

这将在生成的 HTML 输出中结束，如下所示，完全符合您的意图：

<table>
    <tbody>
        <tr><td><input type="text" /></td></tr>
        <tr><td><input type="text" /><input type="hidden" /></td></tr>
        <tr><td><input type="text" /></td></tr>
    </tbody>
</table>

---

与具体问题无关，使用表格进行布局和定位是不好的。使用 div 和 CSS。

Answer 2

问题是，我将隐藏字段放置在面板网格内，就在组件之后，它包含它的值。我将它从面板网格中取出，并将其放在form 标记末尾之前的末尾。问题解决了。

看起来面板网格没有为实际上不存在的组件采用隐藏字段。它仍然由面板网格计算，因为它仍然在 dom 中。要使一个元素成为面板网格中的不可数元素，它必须是未渲染的 (rendered="false")。但随后它也变得完全无法访问，并且它的价值将不再可用，因为它不再存在于 dom 中。