html - HTML 表单在焦点时隐藏文本值 - 没有任何 JavaScript

Question

我有一个简单的表格，如下所示：

的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; }）时，是否可以隐藏“姓氏”之类的文本。我可以使用一些类似的cssdisplay:none或其他东西。

如果是，如何？请帮忙。

请注意：如果可能，我不想使用任何 JavScript。

Answer 1

在 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");
    }
  });
}

Answer 2

即使您在问题中讨论时隐藏了值，您也将无法查看已输入的任何值。

您要么需要使用placeholder属性（形式placeholder="Some text"）或 javascript。对该placeholder属性的支持并不出色：http ://caniuse.com/#search=placeholder 。

或者更好的是，您可以使用placeholder并包含一个 polyfill，它可以解决任何不支持的浏览器：https ://github.com/ginader/HTML5-placeholder-polyfill