如何在文本字段中使文本变灰,当用户点击它时会消失

Question

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

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

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

Answer 1

您所指的效果通常称为占位符效应.在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/