説明テキストを使用したテキスト入力

StackOverflow https://stackoverflow.com/questions/607124

質問

JavaScript（サイトで使用しているJQueryを含む）を使用して、ユーザーがクリックして独自のテキストを入力するまで、テキスト入力に説明テキストを挿入する簡単な方法があるかどうか疑問に思っていました。

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

「Search」という単語をテキスト入力の値にしたくないのは、ユーザーが単語検索を検索できることがいくらか重要だからです。

<！> lt; p <！> gt;の絶対配置を考えていました。入力上で単語を検索し、入力（または入力）がクリックされたときに非表示にする要素を持つ要素。

あなたはどう思いますか？これは恐ろしく見当違いですか？

役に立ちましたか？

解決

最近、希望することを行う jQuery Form Exampleプラグインに出会いました。プロジェクトのgithubページはこちらです。そのプラグインを使用すると、クリックするだけで消えるプレースホルダー値を表示できます。

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

他のヒント

検索入力の初期値を<！> quot; Search <！> quot;に設定できます。次に、onClickリスナーを追加して削除します。

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

<！> quot; search。<！> quot;を検索するユーザーの機能には影響しません。これは、入力上で<p>または<label>要素を精査するよりもはるかにクリーンなアプローチです。

編集：まったく問題ありません-クリックするたびに値を削除するのはユーザーエクスペリエンスが良くありません。それは私が迅速に答えるために得るものです。 :)初期値のみを削除するように更新しました。

これを確認することをお勧めします。 http://www.newmediacampaigns.com/page/nmcformhelper

基本的に、 HTML 5 は<入力要素のstrong> placeholder 属性：

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

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

長年、人気のある<！> quot; project <！> quot;がありました。 labels.js として知られ、元々は古いyoungpup.netのAaron Boodman。アイデアはまだあり、 jQueryバージョンが存在します（デモ＃4）。

  

ユーザーが単語検索を検索できることが重要であるため、実際には単語「Search」をテキスト入力の値にしたくない。

その場合、テキスト入力で背景画像を使用できます。 CSSで、：focusに背景を持たせないようにし、他の人に背景を持たせないように定義できます。このソリューションは、javascriptが無効になっていても機能します。

更新：FF、Opera、Chromeでテストおよび動作しますが、IEはIEをサポートしていませんが、IEは背景画像をサポートしているため、テキストが明るい灰色であれば問題ありません。また、jqueryを使用して、入力フィールドに必要なクラスをいつでも変更できます。

私はこのソリューションを少し前に探していましたが、これ 

/**
* @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();
});

jQueryで次のようにします：

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

これにより、ユーザーは、再度クリックしても、以前に入力した内容が失われなくなります。入力フィールドに割り当てるデフォルト値である場合にのみ、値はクリアされます。

参考までに、この手法は多くの場合、透かしと呼ばれます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top