1

このサイトや Google でどの用語を探すべきかわかりません。私の質問に重複したトピックがある場合はご容赦ください。何を入力すればよいか本当にわかりません。

スクリーンショットを提供して、私の問題を理解できるようにします。

これが（オプションの）値を持つテキストボックスです。

ここに画像の説明を入力

カーソルをフォーカスすると、テキストボックスはフォーカス モードになります (クリックしても (オプション) の値は変更されませんでした..

ここに画像の説明を入力

テキストボックスに何かを入力すると、(オプションの) 値が消え、入力している内容が表示されます。

ここに画像の説明を入力

[<-Backspace]で helloを完全に削除すると、希望する出力 (オプション) は元の状態に戻ります。

ここに画像の説明を入力

簡単に言えば、このテキストボックスはデフォルト値が (オプション) で、入力すると消えて入力内容が表示されます。すべて削除すると、(オプション)戻ってきます。

どうやって始めればいいのか、まったくわかりません。あなたが私を助けてくれたらうれしいです。

4

3 に答える 3

6

標準の HTML 属性が追加されました: placeholder.

<input name=somename placeholder="(optional)">

まだ普遍的にサポートされているわけではありませんが、IE9 ブラウザをアップグレードするまで表示されないユーザーがいるとしても、ページがよりシンプルでクリーンになるため、これが進むべき道だと思います。

于 2013-02-05T08:39:03.737 に答える
2

Yoy は次のようにプレースホルダーを使用できますが、ie バージョンでは機能しません。

<input type="text" placeholder="(optional)">

したがって、次のようにテキストフィールドに JavaScript を追加できます。

<input type="text" value="(optional)" onfocus="if(this.value=='(optional)'){this.value=''}" onblur="if(this.value==''){this.value='(optional)'} />
于 2013-02-05T08:46:48.387 に答える
1

入力内に JS を含める代わりに、ブラウザーが JS を使用した入力プレースホルダーをサポートしているかどうかを確認しvar support_placeholder = "placeholder" in document.createElement('input');てから、使用するメソッドを適応させることができます。

編集：jQueryを使用すると、次のようになります：

$(function(){
  if(!("placeholder" in document.createElement('input'))) {
    $('input').each(function(){
      var ph = $(this).attr('placeholder');
      $(this).val(ph);
      $(this).focus(function(){
        if($(this).val() == ph) { $(this).val(''); }
      }).blur(function(){
        if($(this).val() == '') { $(this).val(ph); }
      })
    })
  }
 })

ここでは Chrome で試してから、たとえば IE8 で試すことができます。

于 2013-02-05T08:56:28.750 に答える