javascript - 当用户键入/擦除时，使文本字段中的提示消失/重新出现

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

这里的工作示例

Answer 3

这是一个例子：

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属性，那么使用这个：

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那么这可能会有所帮助：

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 placeholder="" 属性。

并为旧版浏览器使用 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 事件的背景位置。