JSFのh：inputTextでヒントを使用する

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> 

と...、ここで恐ろしい生成された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

あなたの具体的な間違いは、<f:ajax>にtitleを入れたことです。<h:inputText>ではなくです。 titleは<h:inputText>に設定する必要があります。

また、クラス名を使用することをお勧めします。選択するのがはるかに簡単で、同じ動作を適用する複数の要素を選択することもできます。

など。

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

と

<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" /> 

クラス名はない必ずしもCSSファイルで指定する必要がありません。あなたがtitle属性を持つすべての入力テキスト要素にこれを適用したい場合は、むしろ使用

あるいは、

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