3

アカウントをoracle.comWebサイトに登録しましたが、非常に興味深いものがありました。 ここに画像の説明を入力してください

フォームへの電話番号の入力フィールドを参照してください。同じものを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>

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

4

3 に答える 3

5

これはHTML5以降の新機能です。これplaceholderは、HTML5時代以前は「透かし」としても知られている属性です。

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

もちろん、これはHTML5をサポートするブラウザでのみ機能します。placeholderJSFを使用する場合、これは新しいHTML5属性をサポートする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を何らかの理由で使用できない場合は、内部で行っているのとまったく同じように、カスタムコンポーネントやJS/jQueryのカスタムピースのフレーバーで自分で再発明する必要があり<p:watermark>ます。

于 2012-05-07T22:06:31.570 に答える
2

私は彼らがそのようにするためにjqueryの透かしを使用していると思います。添付されているのは、そのページのファイアバグビューです。

ウォーターマーキングテキストフィールド

于 2012-05-07T22:03:19.310 に答える
2

@BalusCが述べたように、 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ます。

デモ：http： //jsfiddle.net/rYAbU/

于 2012-05-07T22:18:52.647 に答える