在HTML& JS,你如何制作一个灰色文本的文本字段告诉用户当用户点击字段时该字段是什么？

例如,在Firefox中,右上角的搜索字段表示当没有输入时它使用哪个搜索引擎,然后一旦你点击它是一个空的文本字段,但如果你把它留空并从文本字段中删除焦点则灰显文字又回来了.

这个行为有名字吗？此外,是否可以在纯css中进行而无需使用js来进行焦点/模糊事件？

解决方法:

您所指的效果通常称为占位符效应.在HTML5中,只需在输入标记中放置新属性“占位符”,就可以在某些浏览器中实现此效果.如…

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

这也可以在JavaScript中使用CSS完成,方法是为活动类设置样式并切换活动样式和项目的标题标记.如 …

$(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');
    }
}); 

});

测试功能可以在这里看到：http://www.jsfiddle.net/F8ZCW/5/