1

Firefox の検索ボックスで使用される効果を複製しようとしています。検索フィールドにフォーカスがない場合 (ユーザーがその中をクリックしていない場合)、Googleがグレーのテキストで表示されます。次に、ユーザーがボックスをクリックすると、テキストが削除され、検索用語を入力できるようになります。

これを使用して、Web フォームのフィールド データの例を提供したいと考えています。

JQuery 構文はプレーンな JavaScript よりも望ましいですが、プレーンな JS も問題ありません。

ありがとうSOハイブマインド！

4

6 に答える 6

6 
<style type='text/css'>
      input #ghost { color: #CCC; }
      input #normal { color: #OOO; }
</style>

<script type='text/javascript'> 
    function addTextHint(elem, hintText)
    {       
        if (elem.value == '')   
        {       
            elem.value = hintText;
            elem.style.className = 'ghost';
        }

        elem.onfocus = function ()
        {           
            if (elem.value == hintText)         
            {
                elem.value = '';
                elem.className = 'normal';
            }
        }

        elem.onblur = function ()
        {
            if (elem.value == '')
            {
                elem.value = hintText;
                elem.className = 'ghost';
            }
        }           
    }

    addTextHint(document.getElementById('foobar'),'Google');
</script>

これを用意しただけです。jQuery を使用するとサイズが小さくなると思いますが、私は使用しません。

于 2008-11-12T20:09:03.040 に答える
3

この手法は非常に一般的に使用されているため、input タグのプレースホルダー属性を通じて HTML 仕様で明示的にサポートされています。
HTML プレースホルダー属性

ほとんどのブラウザーで既にサポートされており、古いブラウザーには、ここで見つけることができる shim 実装を提供する jquery プラグインがあります。

プレースホルダー テキストのスタイリングについては、これを参照してください (実際の例が含まれています):
HTML5 プレースホルダー CSS によるスタイリング

于 2014-02-04T11:52:23.910 に答える
2

JQueryの実装

<input type="text" id = "textField" value="Google" class="RegularText GhostText" />

<style>
.GhostText{color:#DDD}
.RegularText{color:#CCC}
</style>

<script type="text/javascript" language="javascript">
$("#textField").blur(function(e){
    if ($.trim(e.target.value) == "") {
        e.target.value = e.target.defaultValue;
        e.target.toggleClass("GhostText");
    }
});
$("#textField").focus(function(e){
    if ($.trim(e.target.value) == e.target.defaultValue) {
        e.target.value = "";
        e.target.toggleClass("GhostText");
    }
});
</script>
于 2012-10-18T17:38:07.797 に答える
2

もう 1 つの方法は、CSS を使用して、必要な背景テキストを含む画像を作成し、それをテキスト ボックスの背景画像として設定することです。テキスト ボックスがフォーカスされたら、スタイルを切り替えてその背景画像を削除できます。

于 2008-11-12T20:15:03.403 に答える
0

なぜあなた自身を転がすのですか？このプラグインを使用します。

于 2011-01-20T18:44:12.530 に答える
-2 
  $(selector).text('Google');
  $(selector).click(関数(){
    $(this).text('');
  });

おそらくもっと洗練された方法がありますが、これは、ページの読み込み時にボックスにテキストが含まれていないことを前提としています。その場合は、最初の行を削除できます。

私はこれをテストしていませんが、動作するはずです。

于 2008-11-12T20:06:03.080 に答える