1

次のような単純なフォームがあります。

HTML:

<form action="post">
    <input class="text" type="text" name="firstname" value="First Name"/>
    <br />
    <input class="text" type="text" name="lastname" value="Last Name" />
    <br />
    <input class="text" type="text" name="username" value="Username" />
    <br />
    <input class="text" type="password" name="password" value="password" />
    <br />
    <input class="button" type="submit" value="Submit" />
    <br />
</form>

CSS:

fieldset { margin:1em 0; }
form { margin:0; }
input { }
input.text { color: #aaa; }
input:focus { background:#ddd; }
input, select, textarea { display:block; margin-bottom:5px; padding:5px 10px; }
input[type="checkbox"], input[type="radio"] { padding: 0; display:inline; vertical-align:-1px; }
input[type="submit"] { cursor:pointer; }
label { font-weight:normal; display:block; margin-top:0.5em; }

出力：

ここに画像の説明を入力

私が欲しいのは……

訪問者が入力フィールドをクリックしてbackground-color変更すると#ddd (css を使用して達成していますinput:focus { background:#ddd; })、 Can the text like 'Last Name' be hidden . css などを使用できますかdisplay:none。

はいの場合、どのように？親切に助けてください。

注意:可能であれば、JavaScript を使用したくありません。

4

2 に答える 2

3

HTML 5 では、次のようなプレースホルダーを使用できます。

<input class="text" type="text" name="lastname" value="" placeholder="Last Name"/>

古いブラウザでは、このjqueryスクリプトを使用します

if ($.browser.msie) {
  $("input[type=text], textarea").each(function() {
    return $(this).val($(this).attr("placeholder")).addClass("placeholder");
  }).bind("focus", function() {
    if ($(this).val() === $(this).attr("placeholder")) {
      return $(this).val("").removeClass("placeholder");
    }
  }).bind("blur", function() {
    if ($(this).val() === "") {
      return $(this).val($(this).attr("placeholder")).addClass("placeholder");
    }
  });
}
于 2012-04-24T13:44:51.013 に答える
0

質問で話し合っているときに値を非表示にしても、入力された値を表示する機能は削除されます。

placeholder属性（の形式placeholder="Some text"）またはjavascriptを使用する必要があります。placeholder属性のサポートは素晴らしいものではありません：http： //caniuse.com/#search=placeholder。

または、さらに良いことplaceholderに、サポートなしで任意のブラウザーに対応するポリフィルを使用して含めることができます：https ://github.com/ginader/HTML5-placeholder-polyfill

于 2012-04-24T13:48:57.607 に答える