фантомный текст - как иметь слабый текст в текстовом поле
У меня есть форма онлайн:
http://yoursdproperty.com/index.php?option=com_chronocontact&Itemid=56
Я хотел бы иметь некоторый слабый серый текст там так, чтобы, когда пользователь нажимает на него, он исчез
точно как в этом StackOverflow формируются, где в заголовке вопроса он говорит, "каков Ваш вопрос о программировании, быть описательным?"
что самый простой путь состоит в том, чтобы реализовать это?
3 ответа
В HTML5 это очень легко достигается через атрибут PlaceHolder - не уверен, насколько широко поддерживается, это прямо сейчас.
Вы не упомянули упоминания о jQuery, или любой другой JavaScript Framework, поэтому я собираюсь дать вам чистое решение 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";
}
}