HTML 简单表单文本输入样式答案

【问题标题】：HTML Simple Form Text Input StyleHTML 简单表单文本输入样式
【发布时间】：2011-12-18 01:49:13
【问题描述】：

大家好，我只是想知道如何在输入类型的文本中执行此操作当用户没有点击该框时。在框中显示“编辑名称”，字体颜色略带灰色。当用户单击该框时，它会更改为“John Doe”，然后他们可以对其进行编辑然后提交

//编辑不起作用，因为它已经设置了值。我需要占位符显示，直到点击然后显示值

【问题讨论】：

标签： html css

【解决方案1】：

如果您使用的是 HTML5，Placeholder attribute 是您的最佳选择。

如果不只是抓取用于 jQuery 或 Javascript 的众多水印脚本之一（例如 jQuery Watermark。

编辑

使用 jQuery 和 CSS 实现所需的手动方式：

// CSS 
#name{color:#ccc;}

// HTML
<input type="text" name="name" id="name" size="30" value="Edit Name" />

// jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#name').bind('focus', function() {
    if ($(this).val() == 'Edit Name') {
      $(this).val('John Doe').css('color', '#000');
    }
  });
});
</script>

将上面代码中的 jQuery 部分放入 HTML 文档的 <head> 部分，然后就可以开始了。

【讨论】：

无法正常工作有一个值集。我需要占位符显示，直到点击然后显示值
非常感谢，但我以前从未使用过 jQuery，如何将它包含在我的脚本中？
谢谢！我已将 jquery 放在您发布的
搞定了 :D 谢谢，我如何在 John Doe 部分包含一个 php 变量？
当你输出<input>标签时，只需使用value="<?php echo $the_value; ?>"

【解决方案2】：

较新的浏览器支持 HTML5 placeholder 属性，您可以按如下方式使用：

<input type="text" value="" placeholder="Edit Name">

对于不支持它的浏览器，various fallback scripts 存在，如果该属性不受支持，它将自动执行其工作。

Dive into HTML5 有 a table 的浏览器版本本身支持它，如果你有兴趣的话。

【讨论】：

无法正常工作有一个值集。我需要占位符显示，直到点击然后显示值