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>。

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

E.g。

<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]");
// ...

在jf中使用jQuery的提示：JSF中的inputText

1 个答案: