Question

有谁知道如何在我的搜索栏中制作这样的效果： https://www.dropbox.com/help

<input type="text" name="input">

我的意思是onFocus和onBlur效果，文字消失并动态显示。

谢谢大家！

Answer 1

他们在color属性上使用CSS动画：

摘自他们的main.css：

.sick-input.focused label{ color:#ccc;transition:color .2s linear 0;
                           -webkit-transition:color .2s linear 0;
                           -moz-transition:color .2s linear 0 }

您可以使用前面提到的定义在输入字段上使用:focus伪选择器来模仿效果。

如果由于某种原因我不够清楚：）

http://jsfiddle.net/d9CMR/

更强大的解决方案：

http://jsfiddle.net/d9CMR/3/

更新（正确换色）：

http://jsfiddle.net/d9CMR/6/

<强>来源：

HTML 的

<input type="text" name="input" data-default="fubar">

CSS

input { color:#333; }    
input:focus { color:#ccc;transition:color .2s linear 0;
              -webkit-transition:color .2s linear 0;
              -moz-transition:color .2s linear 0 }
input.typing { color:#333; }

脚本

$(function(){
    var input = $('input[name="input"]'),
        defaulttext = input.attr('data-default');

    input.val(input.attr('data-default'));

    input.on('focus', function(){
        if(input.val() != defaulttext)
            input.addClass('typing');
        else
            input.removeClass('typing');

    }).on('keydown', function(){        
        if(defaulttext == input.val()) input.val('');

        input.addClass('typing');
    }).on('blur', function(){
        if(input.val() == '') input.val(defaulttext);

        that.removeClass('typing');
    }); 
});

Answer 2

试试这个 - 从Dropbox网站使用HTML和CSS ....

HTML：

<div class="sick-input" id="anonymous_element_3">
    <label for="search-input">Type your question here</label>
    <input type="text" id="search-input" name="search_string" value="" tabindex="1">
</div>

CSS：

.sick-input label {
    font-size: 16px;
    position: absolute;
    left: 8px;
    top: 6px;
    cursor: text;
    pointer-events: none;
    color: #777;
}

.sick-input.populated label {
    display: none;
}
input {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
    -webkit-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
    box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
    font-size: 16px;
    border: 1px solid #BFBFBF;
    padding: 5px;
    width: 500px;
}
.sick-input.focused label {
    color: #ccc;
    transition: color .2s linear 0;
    -webkit-transition: color .2s linear 0;
    -moz-transition: color .2s linear 0;
}

JavaScript：

$('#search-input').keyup(function() {
    if ($(this).val() === '') {
        $('.sick-input').removeClass('populated');
    } else {
        $('.sick-input').addClass('populated');
    }   
})

$('#search-input').focus(function() {
    $('.sick-input').addClass('focused');
});

$('#search-input').blur(function() {
    $('.sick-input').removeClass('focused');
});

Working example here

Answer 3

Here就是一个例子：

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" placeholder="Search this site" />
</div>

CSS

body { padding: 20px; }

div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }

的Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
});

如果您不想使用placeholder属性，请使用this：

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" value="Search this site" />
</div>

的Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
}).on('focus', function(e) {
    var $this = $(this);
    if($this.val() == $this.data('placeholder')) {
        $this.val('');
    }

}).on('blur', function(e) {
    var $this = $(this);
    if($this.val() == '') {
        $this.val($this.data('placeholder'));
    }    
}).data('placeholder', $('input').val());

如果您不想使用value字段的input属性，那么this可能有所帮助：

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" value="" />
</div>

CSS

body { padding: 20px; }

div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }
.focused label { color: #aaa; }

的Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
}).on('focus', function(e) {
    $('div').addClass('focused');
}).on('blur', function(e) {
    $('div').removeClass('focused');
});

Answer 4

您还可以使用html5占位符=“”属性，该属性具有类似的效果。

对旧浏览器使用jquery后备：https://github.com/mathiasbynens/jquery-placeholder

Answer 5

你可以尝试这个

Javascript代码

function txtblur()
{
    document.getElementById('txtval').value="";
}
function textblur()
{
    document.getElementById('txtval').value="Enter word to search";
}

HTML文本框代码

<input type="text" class="tbct" name="txtval" id="txtval" value="Enter word to search" onfocus="txtblur()"/>

Answer 6

如果已知高度或宽度，您还可以将包含所需文本的背景图像精灵设置到输入字段，并调整onfocus和onblur事件的背景位置。

当用户输入/删除时，在文本字段中使提示消失/重新出现

6 个答案: