javascript - How do you have grayed out text in a textfield that dissapears when the user clicks on it - Stack Overflow

admin管理员组

文章数量:1310067

In HTML & JS, how do you make a textfield that has grayed out text telling the user what the field is for that goes away when the user clicks on the field?

For example, in firefox the search field in the top right hand side says which search engine it uses when there's nothing entered, then once you click it's an empty textfield, but if you leave it blank and remove focus from the textfield then the grayed out text is back again.

Is there a name for this behavior? Also, is it possible to do in pure css without the use of js to do the on focus / on blur events?

In HTML & JS, how do you make a textfield that has grayed out text telling the user what the field is for that goes away when the user clicks on the field?

For example, in firefox the search field in the top right hand side says which search engine it uses when there's nothing entered, then once you click it's an empty textfield, but if you leave it blank and remove focus from the textfield then the grayed out text is back again.

Is there a name for this behavior? Also, is it possible to do in pure css without the use of js to do the on focus / on blur events?

• javascript
• html
• textbox
• textfield

Share Improve this question Follow asked Dec 26, 2010 at 3:54 John SmithJohn Smith 91111 gold badge88 silver badges55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The effect that you are referring to is often called the placeholder effect. Within HTML5 this effect is possible within certain browsers by simply placing the new attribute 'placeholder' within your input tag. Such as...

 <input type='text' placeholder='Place Holder Text'/>
 <input type='text'/> <!-- Example with no title-->
 <input type='text' title='Your title'/>

This can also be done in JavaScript using CSS by setting a style for an active class and toggling the active style along with the item's title tag. Such as ...

$(document).ready(function(){
// Select all input fields. (You will probably want to filter this down even further).
var inputs = $('input[type=text]');

// Set all the inputs to the title value.
inputs.each(function(){
    $(this).val($(this).attr('title')).addClass('unfocused'); // Styling Class for inputs.
});

// When the user focuses on an input
inputs.focus(function(){
    var input = $(this);
    if(input.val() == input.attr('title')){
        $(this).removeClass('unfocused').val('');
    }
});
// When the user loses focus on an input    
inputs.blur(function(){
    var input = $(this);
    if(input.val() == ''){ // User has not placed text
        input.val(input.attr('title')).addClass('unfocused');
    }
}); 

});

The tested function can be seen here: http://www.jsfiddle/F8ZCW/5/

This behavior is on my URL shortener site: http://relk.in

The basic idea is when the onfocus event fires, you modify the CSS of the textfield to a normal class, and then onblur, you re-apply the previous class.

And no, you cannot do this in pure CSS.

Example:

var textfield = document.getElementById('someTextField');
textfield.onfocus = function() {
   this.className = this.className.replace('oldClassName', 'newClassName');
};
textfield.onblur = function() {
   this.className = this.className.replace('newClassName', 'oldClassName');
}

本文标签：