Jquery & JSF 找到 <h:inputText/> 的特定 id [重复]答案

【问题标题】：Jquery & JSF find the particular id for <h:inputText/> [duplicate]Jquery & JSF 找到 <h:inputText/> 的特定 id [重复]
【发布时间】：2013-05-29 07:19:36
【问题描述】：

我希望使用 Jquery 在 JSF 中为 inputText 匹配 id。但它不起作用，我不知道为什么。

JSF 代码

<h:inputText id="email" value="#{userActionManager.newUser.emailID}">
</h:inputText>

jQuery 代码

$(document).ready(function() {
$("inputText[id^=email]").each(function(){

    this.value = $(this).attr('title');
    $(this).addClass('text-label');

    $(this).focus(function(){
        if(this.value == $(this).attr('title')) {
            this.value = " ";
            $(this).removeClass('text-label');
        }
    });

    $(this).blur(function(){
        if(this.value == '') {
            this.value = $(this).attr('title');
            $(this).addClass('text-label');
        }
    });
});
});

我需要 inputText[id^=email] 来访问 JSF 代码中使用的 inputText id。请帮忙...

【问题讨论】：

自从我使用 JSF 已经有一段时间了，但 inputText 没有扩展到常规的 input 标签？所以你应该在生成的 HTML 而不是模板组件上使用 jQuery。
在浏览器中右键单击 JSF 页面并选择 查看源代码。一直盯着它看，直到你最终意识到 JSF 只是一个 HTML 代码生成器，而 JavaScript 根本看不到 JSF 组件，而只有 HTML 元素。

标签： jquery jsf

【解决方案1】：

首先，页面上的 ID 应该是唯一的。

接下来从选择器中删除inputText tag (It is not a valid jQuery element selector)

$("[id^=email]").each(function(){

您还可以将“电子邮件”类添加到 inputText 并使用类选择器：

$(".email").each(function(){

【讨论】：

需要将<h:inputText id="email"改为<h:inputText class="email"
@user2446821，需要将<h:inputText id="email"改为<h:inputText styleClass="email"（会转化为html class="email"）
@Daniel.. 不知道.. 谢谢你的信息。

【解决方案2】：

正如 Sushanth 提到的，您不能在 jQuery 中使用 inputText 作为选择器。您必须改用input：

jQuery("input[type='text'][id^=email]:visible").each(...

要检查的另一点是生成的客户端 ID。
事实上，如果在您的表单中您没有指定 prependId="false"，那么表单 ID 将被添加到 inputText id，例如：如果表单有 id="formId"，那么为您的输入文本生成的 ID 通常是： formId:email。您必须使用 Chrome 或 Firebug 检查 ID 才能确定。

【讨论】：