0

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

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

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

使用 JSF 和 jQuery 基于 ID 绑定事件

通过 JQuery 在 JSF inputText 控件上写入数据

我的代码的相关部分：

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 中当前的内容，但我什么都没有。

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

4

1 回答 1

3

你的具体错误是你穿上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 文件中指定。

Or, if you want to apply this on all input text elements having a title attribute, then rather use

var $e = $("input:text[title]");
// ...
于 2012-03-23T11:39:31.207 回答