幽灵文本 - 如何在文本框中显示淡色文本

Question

我有一个在线表单：

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

我想在那里添加一些淡灰色的文本，让用户点击后它会消失。就像在 StackOverflow 表单中，问题标题中说“你的编程问题是什么，请详细说明？”

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

- Alex Gordon

Answer 1

在HTML5中，这可以通过placeholder属性非常轻松地实现 - 不确定目前有多广泛的支持。

- Michael Borgwardt

---

非常感谢！它得到了广泛的支持，但是Firefox和Chrome支持它，对我来说已经足够了。 - Alex Gordon

Answer 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";
  }
}

- Sampson

---

不，你不能仅使用HTML完成这个。 - sourcenouveau

Answer 3

您可以使用这个jQuery插件。

- SLaks