29

簡単な質問だと思いますが、グーグルでこの質問を検索する方法がわかりません

入力テキストフィールドに背景テキストが必要です。いいね：あなたの名前を挿入します。そして、フィールドに押し込んで名前を挿入すると、テキストが消えます

さて、解決策をありがとう。

<input id="textfield" name="textfield" type="text" placeholder="correct" />

今、私は私に2番目の質問をします。プレースホルダーの色を変更するにはどうすればよいですか？これが私のテキストエリアです：http： //jsfiddle.net/wy8cP/1/

4

6 に答える 6

44

HTML5を使用してプレースホルダーを取得する方法は次のとおりです。

<input id="textfield" name="textfield" type="text" placeholder="enter something" />

編集：

以下に示すように、独自のポリフィルを一緒にハッキングすることはもうお勧めしません。Modernizrを使用して、最初にポリフィルが必要かどうかを最初に検出してから、ニーズに合ったポリフィルライブラリをアクティブ化する必要があります。Modernizrwikiにリストされているプレースホルダーポリフィルの良い選択があります。

オリジナル（続き）：

そして、これが互換性のためのポリフィルです：

<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">

http://jsfiddle.net/q3V4E/1/

より良いシムアプローチは、ページの読み込み時にこのスクリプトを実行し、プレースホルダーをdata-placeholder属性に配置することです。これにより、マークアップは次のようになります。

<input id="textfield" name="textfield" type="text" data-placeholder="enter something">

そしてあなたのjsはこのように見えます：

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = inputs[i].getAttribute('data-placeholder');
    inputs[i].addEventListener('focus', function() {
        if (this.value == this.getAttribute('data-placeholder')) {
            this.value = '';
        }
    });
    inputs[i].addEventListener('blur', function() {
        if (this.value == '') {
            this.value = this.getAttribute('data-placeholder');
        }
    });
}

http://jsfiddle.net/q3V4E/4/

于 2012-10-25T15:22:15.840 に答える
4

HTML5は、placeholderこの特定の問題に対処する属性を提供します。詳細については、このリンクを参照してください（JSFiddle）

<input type="text" placeholder="insert your name" />

ここで説明されているような、HTML5以外のjavascriptフォールバック、またはNone jqueryプレースホルダーフォールバックをいつでも提供できますか？JQueryを使用していない場合。

于 2012-10-25T15:19:10.350 に答える
2

HTML5フォームフィールドプレースホルダーを探していると思います...:)

http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

于 2012-10-25T15:19:15.027 に答える
1

HTML以外の5つの受け入れられた答えのjqueryバージョン：

    var inputs = $("input[type='text']", context);
    $.each(inputs, function (i, obj) {
        $(obj).val($(obj).attr('data-placeholder'));
        $(obj).on('focus', function () {
            if ($(this).val() == $(this).attr('data-placeholder')) {
                $(this).val('');
            }
        });
        $(obj).on('blur', function () {
            if ($(this).val() == '') {
                $(this).val($(this).attr('data-placeholder'));
            }
        });
    });
于 2015-10-14T15:16:44.813 に答える
1

プレースホルダーの色を変更するには、CSSを使用します。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

ソース：https ：//css-tricks.com/almanac/selectors/p/placeholder/

于 2017-04-21T18:51:53.777 に答える
0

HTML5以外の場合は、toggleval.jsなどの優れたJavaScriptソリューションをお勧めします。これにより、すべての入力フィールドを自分でインラインで実行する必要がなくなります。それはグローバルです。

http://snipplr.com/view/9077/

その後に呼び出すスクリプトは次のようになります。

    <script type="text/javascript">
    $(document).ready(function() {
        // Input Box ToggleVal
        $("input[type=text]").toggleVal();
        $("input[type=password]").toggleVal();
    });
    </script>
于 2012-10-25T15:27:46.007 に答える