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 ファイルで指定する必要はありません。

または、属性を持つすべての入力テキスト要素にこれを適用したい場合はtitle、代わりに

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