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

问题描述

有谁知道我如何在搜索栏中做出这样的效果：

< input type =textname =input> $ b

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

谢谢

$ b

解决方案

摘自他们的：

  .sick-input.focused标签{color：#ccc; transition：color .2s linear 0; 
 -webkit-transition：color .2s linear 0; 
 -moz-transition：color.2s linear 0} 
  

---

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

---

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

---

更强大的解决方案：

---

更新（使用适当的颜色更改）：

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

---

来源： > HTML

 < input type =textname =inputdata-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'）; $ b $ （'keydown'，function（）{
 if（defaulttext == input.val（））input.val（''）; 
 
 input （'input'）; 
}）。on（'blur'，function（）{
 if（input.val（）==''）input.val（defaulttext）; 
 
 that.removeClass（'typing'）; 
}）; 
}）; 
  

Does anyone knows how can i make an effect like this in my search bar:https://www.dropbox.com/help

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

I mean the onFocus and onBlur effect with the text disappearing and appearing dynamically.

Thank you folks!

解决方案

They use CSS Animations on the color property:

Excerpt from their 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 }

---

You can mimic the effect using the :focus pseudo selector on the input field with the previously mentioned definitions.

---

If for some reason I wasn't clear enough :)

http://jsfiddle.net/d9CMR/

---

More robust solution:

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

---

Update (with proper color change):

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

---

Source:

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; }​

Script

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

这篇关于当用户键入/擦除时，使文本字段中的提示消失/重新出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！