您需要准确使用 JSF 在生成的 HTML 输出中分配的 ID。右键单击网络浏览器中的页面并选择查看源代码。这正是 JS 看到的 HTML 代码（你知道，JS 运行在 web 浏览器中并在 HTML DOM 树上拦截）。
Given a
<h:form>
<h:inputText id="emailAddresses" ... />
它看起来像这样：
<form id="j_id0">
<input type="text" id="j_id0:emailAddress" ... />
Where j_id0是生成的 HTML 的生成 ID<form>元素。
你宁愿把所有的JSF都给NamingContainer组件固定id这样 JSF 就不会自动生成它们。这<h:form>是其中之一。
<h:form id="formId">
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
这样表单就不会获得自动生成的 ID，例如j_id0输入字段将得到一个固定的IDformId:emailAddress。然后你就可以在 JS 中引用它了。
var input = document.getElementById('formId:emailAddress');
从那时起，您可以像往常一样继续使用 JS 代码。例如。通过获得价值input.value.
也可以看看：
Update根据您的更新：您误解了博客文章。特别的#{component}参考是指current评估 EL 表达式的组件，并且这只适用于组件本身的任何属性。您想要的也可以通过以下方式实现：
var input = document.getElementById('#{emailAddress.clientId}');
与（注意binding到视图，你应该绝对不将其绑定到 bean）
<h:inputText binding="#{emailAddress}" />
但这实在是丑陋。最好使用以下方法，其中将生成的 HTML DOM 元素作为 JavaScript 传递this函数的引用
<h:inputText onclick="show(this)" />
with
function show(input) {
alert(input.value);
}
如果您使用 jQuery，您甚至可以更进一步，使用样式类作为标记接口来抽象它们
<h:inputText styleClass="someMarkerClass" />
with
$(document).on("click", ".someMarkerClass", function() {
var $input = $(this);
alert($input.val());
});
