どのようにJSF入力フィールドに

を影を作成する私はoracle.comのウェブサイトにアカウントを登録して、私は非常に興味深いものを見ました： enter image description here どのようにJSF入力フィールドに

は、フォームに電話番号の入力欄を参照してください。同じものをJSF入力フォームにどのように再現できますか？これはCSSで作られたものですか？

コード更新

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html"> 
    <h:head> 
     <script type="text/javascript"> 
      <!-- input field shadow --> 
      var placeholder = "test field" 
      $("input").on({ 
       focus: function() { 
        if (this.value == placeholder) { 
         $(this).val("").removeClass("shadow"); 
        } 
       }, 
       blur: function() { 
        if (this.value == "") { 
         $(this).val(placeholder).addClass("shadow"); 
        } 
       } 
      }).trigger("blur");    
     </script>  

    </h:head> 

    <h:body> 
     <h1>JSF 2 textbox example with shadow</h1> 

     <h:form> 
      <h:inputText value="#{userBean.userName}" /> 
      <h:commandButton value="Submit" action="user" /> 
     </h:form> 

    </h:body> 
</html>

私はこのコードをテストしたが、それは働いていません。たぶん私は<h:inputText>タグの関数としてJavaScriptコードを呼び出す必要がありますか？

出典

2012-05-07 user1285928

これはHTML5ので、新しいものであることを示し、そのページの放火犯のビューを添付します。 placeholder属性です.HTML5時代以前は「透かし」とも呼ばれています。

<input type="text" name="phone" placeholder="e.g. +994 (12) 491 2345" />

これはもちろんHTML5をサポートするブラウザでのみ機能します。 JSFを使用する場合、これは新しいHTML5 placeholder属性をサポートするJSFコンポーネントでのみ機能します。標準のJSF <h:inputText>はこれをネイティブに（まだ）サポートしていません。これをサポートするサードパーティコンポーネントライブラリを探す必要があります。その中PrimeFacesはその<p:watermark>コンポーネントである：

<h:inputText id="phone" value="#{register.user.phone}" /> 
<p:watermark for="phone" value="e.g. +994 (12) 491 2345" />

これは、HTML5がサポートされているかどうかを確認してからplaceholderを使用し、それ以外の場合は、同じことをシミュレートするために、いくつかのJS/jQueryの魔法にもたらすでしょう。このすべてがCSSによって行われるものはありません。

何らかの理由でPrimeFacesを使用できない場合は、<p:watermark>のようにカスタムコンポーネントやカスタムJS/jQueryのフレーバーで再作成する必要があります。

出典

2012-05-07 22:06:31 BalusC

私が実装するかどうかはわかりません質問があります。 @VisioNによって投稿されたサンプルを使用したいと思います。私はこの値をどのように渡すべきかわかりません。 +994（12）491 2345'をJSFゲッターからJavaScriptコードに変換して、この値をデータベースに保存したいのですか？これは可能ですか？ – user1285928

確かに可能です。 JSFはHTMLコードジェネレータです。 JSFがJS変数のように値を出力させるだけです。 – BalusC

@ @ VisioNによって投稿されたコードについてお聞きしたいと思います。私は単純なJSPページにコードを挿入しましたが、Firefoxで開いたときに影がうまく機能しません。私は ''フィールドからJavaScriptコードを呼び出さなければならないと思いますか？しかし、JavaScriptコードを呼び出すにはどのような属性を使用する必要があり、どの入力フィールドにも異なる影を持たせるためにはどのように引数を送信する必要がありますか？ – user1285928

jqueryの透かしを使っていると思います。

Water Marking Text Field

出典

2012-05-07 22:03:19 raddykrish

あなたが@BalusC statedとして、PrimeFacesを使用するために何の可能性を持っていない場合、あなたはこのようにはJavaScript/jQueryのコードを使用することができた場合：

var placeholder = "e.g. +358 (11) 123-45-67" 
$("input").on({ 
    focus: function() { 
     if (this.value == placeholder) { 
      $(this).val("").removeClass("shadow"); 
     } 
    }, 
    blur: function() { 
     if (this.value == "") { 
      $(this).val(placeholder).addClass("shadow"); 
     } 
    } 
}).trigger("blur");

CSSクラスshadowは、フォントcolor: #bbbを持っています。

DEMO：http://jsfiddle.net/rYAbU/

出典

2012-05-07 22:18:52 VisioN

あなたの例はとても良いですが、私はここで一つの問題を抱えています。この値を保存する必要があります（例： '+994（12）491 2345'をデータベーステーブルに追加します。 JSFゲッターからこの値をJavaScriptにどのように渡すことができますか？ – user1285928

どのようにJSF入力フィールドに

答えて

関連する問題