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

Question

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

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

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

точно так же, как в этой форме StackOverflow, где в заголовке вопроса написано «какой у вас вопрос программирования, будьте наглядным?»

как проще всего это реализовать?

Answer 1

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

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

Answer 3

Вы можете использовать этот плагин jQuery .