幻影文本 - 如何在文本框中显示模糊的文本答案

【问题标题】：ghost text - how to have faint text in textbox幻影文本 - 如何在文本框中显示模糊的文本
【发布时间】：2010-01-31 23:55:37
【问题描述】：

我有一个在线表格：

http://yoursdproperty.com/index.php?option=com_chronocontact&Itemid=56

我想在那里有一些淡灰色的文字，这样当用户点击它时，它就会消失

就像在这个 StackOverflow 表单中一样，在问题的标题中它说“你的编程问题是什么，是描述性的？”

最简单的实现方法是什么？

【问题讨论】：

标签： javascript html css

【解决方案1】：

在 HTML5 中，这很容易通过 placeholder 属性实现 - 但不确定目前支持的范围有多大。

【讨论】：

非常感谢！它确实得到了足够广泛的支持，但是 Firefox 和 chrome 支持它对我来说已经绰绰有余了

【解决方案2】：

您没有提到 jQuery 或任何其他 javascript 框架，所以我将为您提供纯 Javascript 解决方案。

一些基于框值的布尔逻辑来设置字体颜色。当用户单击输入时，如果该值等于您的默认值，您将删除内容。如果不是，你什么也不做。当用户离开该框时，如果值为空，请再次添加您的默认文本。

// Reference our element
var txtContent  = document.getElementById("content");
// Set our default text
var defaultText = "Please enter a value.";

// Set default state of input
txtContent.value = defaultText;
txtContent.style.color = "#CCC";

// Apply onfocus logic
txtContent.onfocus = function() {
  // If the current value is our default value
  if (this.value == defaultText) {
    // clear it and set the text color to black
    this.value = "";
    this.style.color = "#000";
  }
}

// Apply onblur logic
txtContent.onblur = function() {
  // If the current value is empty
  if (this.value == "") {
    // set it to our default value and lighten the color
    this.value = defaultText;
    this.style.color = "#CCC";
  }
}

【讨论】：

不，您不能仅在 HTML 中执行此操作。

【解决方案3】：

您可以使用this jQuery plugin。

【讨论】：