Question

在HTML＆amp; 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/

Answer 2

此行为发生在我的网址缩短版网站上：http://relk.in

基本思想是当onfocus事件触发时，您将文本字段的CSS修改为普通类，然后onblur，您重新应用上一个类。

不，你不能在纯CSS中做到这一点。

示例：

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

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

2 个答案: