在 JSF 中的 h:inputText 上使用 jQuery 提示

Question

我在获取使用 jQuery 处理 h:inputText 的提示时遇到问题。我很确定问题归结为选择器，但我不知道如何解决它。

我使用的基本代码可以在这里找到： http://www.techtricky.com/jquery-textbox-hint/

我找到的最相关的问题（但没有解决方法）可以在这里找到：

Binding events based on ID with JSF and jQuery

Write data on a JSF inputText control through JQuery

我的代码的相关部分：

function textboxHint(id) {
    var o = {
        selector : 'input:text[title]',
        blurClass : 'blur'
    };
    $e = $("input[id$='"+id+"']");

    if ($e.is('input:text')) {
        if (!$e.attr('title'))
            $e = null;
    } else {
        $e = $e.find(o.selector);
    }
    if ($e) {
        alert($e.size());
        $e.each(function() {
            var $t = $(this);
            alert($t);
            alert($t.attr('title'));
            if ($.trim($t.val()).length == 0) {
                $t.val($t.attr('title'));
            }
            if ($t.val() == $t.attr('title')) {
                $t.addClass(o.blurClass);
            } else {
                $t.removeClass(o.blurClass);
            }

以前，与 $e = $('#'+id); 我很确定 $e 包含一些不正确的东西。 使用这种方式，它将使其变为 $e = $e.find(o.selector);，但 $e.size() 会提示 0，以及我目前正在尝试的方式。

这是我的 JSF 页面的相关部分：

<h:form>
    <div id="greyText">
        <h:inputText accesskey="s" alt="Search" id="searchBox" valueChangeListener="#{peopleBean.simplePersonQuery}" size="25" >
            <f:ajax execute="searchBox" render="peopleDataTable" event="keyup" title="Search plebeians..." />
        </h:inputText>
        <h:outputText id="advancedText" value="&#x25be;More" />
    </div>

并且...如果您可以阅读此内容（使用 Inspect Element 更容易，抱歉），这里是生成的可怕 HTML：

<div id="greyText"><script type="text/javascript" src="/MotherOfAll/javax.faces.resource/jsf.js.html?ln=javax.faces"><!--

//--></script><input id="j_id1847166489_6e198658:searchBox" name="j_id1847166489_6e198658:searchBox" type="text" value="" onkeyup="jsf.ajax.request('j_id1847166489_6e198658:searchBox',event,{execute:'j_id1847166489_6e198658:searchBox',render:'j_id1847166489_6e198658:peopleDataTable','javax.faces.behavior.event':'keyup'})" alt="Search" size="25" accesskey="s" /><span id="j_id1847166489_6e198658:advancedText">▾More</span>
            </div>

我希望我可以发布更多关于我必须解决此问题的线索的信息，但我不能。我一直在研究选择器是如何工作的（不是我的强项）以及如何提取 jQuery 中当前的内容，但我什么都没有。

任何帮助将不胜感激，谢谢。

Answer 1

您的具体错误是您将title 放在<f:ajax> 上，而不是放在<h:inputText> 上。 title 必须设置在 <h:inputText> 上。

此外，我建议使用类名，这样更容易选择，并且还允许您选择应应用相同行为的多个元素。

例如

<h:inputText styleClass="hintable" title="Hint for input field 1" />
<h:inputText styleClass="hintable" title="Hint for input field 2" />
<h:inputText styleClass="hintable" title="Hint for input field 3" />

与

var $e = $(".hintable");
// ...

类名不一定必须在 CSS 文件中指定。

或者，如果您想将其应用于 所有 具有title 属性的输入文本元素，那么请使用

var $e = $("input:text[title]");
// ...