Текст призрака - как иметь слабый текст в текстовом поле

У меня есть онлайн-форма:

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

Я хотел бы иметь некоторый слабый серый текст там, чтобы, когда пользователь нажимает на него, он исчезает

точно так же, как в этой форме StackOverflow, где в заголовке вопроса говорится: "Какой ваш вопрос программирования, описать?"

Каков самый простой способ реализовать это?

ОТВЕТЫ

Ответ 1

В HTML5 это достигается очень легко с помощью атрибута placeholder - не уверен, насколько широко поддерживается это сейчас.

Ответ 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";
  }
}