使用 Javascript 获取 JSF 定义的组件

Question

我正在使用 JSF 创建一个界面，如果第二个尚未设置，我希望一个文本字段的值提供一秒钟的默认值。关键代码如下所示：

<h:outputScript>
function suggestValue2() {
    var value2 = document.getElementById('value2').value;
    if (value2 == "") {
        document.getElementById('value2').value = document.getElementById('value1').value;
    }
}
</h:outputScript>

<h:inputText
    id="value1"
    onblur="suggestValue2();" />

<h:inputText
    id="value2" />

问题是这实际上不起作用。这两个输入元素的实际 ID 以一些 JSF 生成的值作为前缀，这会阻止 getElementById 调用。对我来说，完成我在这里想要完成的事情的最佳方式是什么？

---

编辑： 我应该注意，这将出现在一个复合组件中，它最终可能会在一个页面上出现多次。 JSF 动态设置实际 ID 表示期望的行为。

Answer 1

Jsf 使用“命名容器”的概念，它表示 id 在提供的容器中不必是唯一的。前提是容器有一个 Id。因此，如果您没有为容器提供 Id，jsf 会在元素之前附加不可预测的值。有了容器的 id，它就变成了 containerid:elements id。这可以在 JavaScript 中可靠地使用

Answer 2

将组件绑定到视图，

<h:inputText binding="#{input1}" ... />

这样您就可以通过UIComponent#getClientId() 在视图的其他位置打印其客户端 ID。

<h:outputScript>
    var input1 = document.getElementById('#{input1.clientId}');
    // ...
</h:outputScript>

---

正如您提到的，您在一个复合组件中，最好知道复合组件自己的客户端 ID 已经可以通过 #{cc.clientId} 获得。所以更推荐的选择是：

<cc:implementation>
    <h:outputScript>
        var input1 = document.getElementById('#{cc.clientId}:input1');
        // ...
    </h:outputScript>
    ...
    <h:inputText id="input1" ... />
    ...
</cc:implementation>

另见：

• Integrate JavaScript in JSF composite component, the clean way