ghost text - how to have faint text in textbox
I've an online form:
http://yoursdproperty.com/index.php?option=com_chronocontact&Itemid=56
I would like to have some faint gray text there so that when the user clicks on it, it disappears
exactly like 开发者_运维问答in this StackOverflow form where in the title of the question it says "what's your programming question, be descriptive?"
what is the simplest way to implement this?
In HTML5, this is achieved very easily via the placeholder
attribute - not sure how widely supported that is right now, though.
You made no mention of jQuery, or any other javascript framework, so I'm going to give you the pure Javascript solution.
Some boolean logic based upon the value of the box to set the font color. When the user clicks the input, if the value is equal to your default value, you erase the contents. If it's not, you do nothing. When the user leaves the box, if the values are empty, add your default text in again.
// 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";
}
}
You can use this jQuery plugin.
精彩评论