テキスト入力テキスト

Question

ユーザーがテキストを入力するまでテキスト入力に説明テキストを挿入するために、javascript（サイトで使用しているJQueryを含む）で簡単な方法があるのだろうかと思っていました。

たとえば、ユーザーが入力をクリックして消えて検索用語を入力するまで、「検索」という単語をテキスト入力（実際の入力よりも明るい色）に入れたいとします。 。

私は実際に単語検索の単語を検索することができるので、「検索」という単語をテキスト入力の値にしたくないです。

<p>要素を入力上に単語検索し、要素（または入力）をクリックしたときに非表示にすることを考えていました。

あなたはどう思いますか？これは恐ろしく間違っていますか？

Answer 1

私は最近、あなたが望むだけのjQuery Form Example pluginにぶつかりました。プロジェクトのgithubページはhereです。

$('input#search').example('Search');

Answer 2

検索入力の初期値を "検索"に設定してから、それを削除するためにonClickリスナーを追加することができます。

$("input.search-term").one("click", function() { $(this).removeAttr("value"); });

それは検索するユーザの能力は影響しません「検索を。」これは、入力上で<p>または<label>要素を処理しようとするよりもはるかにクリーンなアプローチです。

編集：あなたはすべて正しいです - 各クリックの値を削除するのはUXが貧弱です。それが私がすばやく答えるためのものです。 :)初期値のみを削除するように更新しました。

Answer 3

長年に渡って、古くからのyoungpup.netのAaron Boodmanによって書かれた、labels.jsと呼ばれる人気のある「プロジェクト」がありました。アイデアは依然として存在し、jQuery version、さらには（デモ＃4）が存在します。

Answer 4

私はjQueryの中でこのような何かをするだろう：

$("input.searchterm").click(function() { 
    var $input = $(this); 
    if ($input.val() == "enter search term") $input.val(""); 
}; 

この方法で、ユーザーは、彼らが再びクリックすると、以前に入力したものを失うことはありません。値は、入力フィールドに割り当てたデフォルト値である場合にのみクリアされます。

Answer 5

は私が実際に言葉「検索」テキスト入力の値であることをしたくない：そのプラグインを使用すると、ちょうどこのとクリックで消えるプレースホルダの値を表示することができますしかし、ユーザが単語検索を検索できることは幾分重要であるためです。

この場合、テキスト入力で背景画像を使用できます。あなたはCSSで以下を定義することができます：フォーカスはバックグラウンドを持たず、unfoucusedはそれを持つべきです。このソリューションは、JavaScriptが無効になっていても機能します。

更新：IEはサポートしていないので、FF、Opera、Chromeでは動作しますがIEではサポートされていないため、IEではバックグラウンドイメージをサポートしています。また、jqueryを使用して、入力フィールドの分類を変更できます。

Answer 6

参考として、この技術は、しばしば透かしと呼ばれます。

Answer 7

私はずっと前、この解決策を探していました

となったクロスthis

/** 
* @author Remy Sharp 
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/ 
*/ 

(function ($) { 

$.fn.hint = function (blurClass) { 
    if (!blurClass) { 
    blurClass = 'blur'; 
    } 

    return this.each(function() { 
    // get jQuery version of 'this' 
    var $input = $(this), 

    // capture the rest of the variable to allow for reuse 
     title = $input.attr('title'), 
     $form = $(this.form), 
     $win = $(window); 

    function remove() { 
     if ($input.val() === title && $input.hasClass(blurClass)) { 
     $input.val('').removeClass(blurClass); 
     } 
    } 

    // only apply logic if the element has the attribute 
    if (title) { 
     // on blur, set value to title attr if text is blank 
     $input.blur(function() { 
     if (this.value === '') { 
      $input.val(title).addClass(blurClass); 
     } 
     }).focus(remove).blur(); // now change all inputs to title 

     // clear the pre-defined text when form is submitted 
     $form.submit(remove); 
     $win.unload(remove); // handles Firefox's autocomplete 
    } 
    }); 
}; 

})(jQuery); 


$(function(){ 
    // find all the input elements with title attributes 
    $('input[title!=""]').hint(); 
}); 

Answer 8

あなたはこれをチェックすることもできます。基本的には http://www.newmediacampaigns.com/page/nmcformhelper

は、HTML 5は、入力要素のためのプレースホルダ属性をサポートしています：

<input type="text" placeholder="Your browser supports placeholder text" size=38> 

WebKit（ChromeとSafari）はこれをサポートしていますが、FirefoxやIEのような他のブラウザでは、ブラウザがHTML 5機能をサポートしていないときにこのスクリプトを使用して効果をシミュレートできます。