3

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!

rlandster
  • 7,294
  • 14
  • 58
  • 96
Andre Oliveira
  • 197
  • 2
  • 10
  • 1
    it uses a label absolutely positioned - the color changes onfocus and is hidden when the input is populated .. – Manse May 15 '12 at 13:55
  • thanks @ManseUK i inspected they script and so that they are using label positioned, but i need an example, couse i tried to implement it but i couldn´t :/ i really appreciate if u could make a basic example on how can i do this! – Andre Oliveira May 15 '12 at 14:09
  • We expect you to have attempted to solve this problem by yourself rather than asking the community to arrive at a complete solution for you. When you've got some code to show us that demonstrates some effort by you (even if it's wrong) please update your question and flag to re-open. Thanks. – Kev May 16 '12 at 16:30
  • No need! @Xander and the other nice guys already helped me. – Andre Oliveira May 16 '12 at 17:40

6 Answers6

7

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');
    }); 
});
Alex
  • 34,899
  • 5
  • 77
  • 90
  • Yeah thanks! That's a good point, but could you apply this in my simple example for me to understand that please? – Andre Oliveira May 15 '12 at 14:14
  • I did, navigate to the link in the answer (jsfiddle) and click in the text field ... – Alex May 15 '12 at 14:15
  • @Xander thats not working very well - the value remains in the field ... – Manse May 15 '12 at 14:16
  • NICE @Xander worked! We are nearly there. The thing is when i type something the written text is added to the value set – Andre Oliveira May 15 '12 at 14:17
  • @ManseUK yes, you'd need js to remove the `value` if the text in the field is not equal to ***fubar*** on `focus` ... – Alex May 15 '12 at 14:18
  • @ManseUK just provided an update with a complete solution. – Alex May 15 '12 at 14:33
  • @Xander could you update ur post with the change u suggested? `need js to remove the value if the text in the field is not equal to fubar on focus ...` – Andre Oliveira May 15 '12 at 14:33
  • @Xander ive added an answer too .... like a challenge ! – Manse May 15 '12 at 14:34
  • @ManseUK lol, keydown is better ;) – Alex May 15 '12 at 14:34
  • @Xander your robust solution still has the text in a very light color ... (will update my answer with keydown :-)) – Manse May 15 '12 at 14:35
  • @Xander ur robust solution is what i was looking for. Just another thing, can the color be black when i am typing? – Andre Oliveira May 15 '12 at 14:56
  • @Xander when i changed my input to `data-default="fubar"` in the browser is not showing the text fubar inside of the box, like is on ur example. I just copied and pasted ur code in my localhost index.php and tested on browser Chrome.. do you know what can be happening? – Andre Oliveira May 15 '12 at 15:06
  • make sure there aren't any script errors that are preventing my snippet from executing ... – Alex May 15 '12 at 15:08
  • @Xander by the way ur example is perfect! Just what i wanted. The only strange thing is that i mentioned – Andre Oliveira May 15 '12 at 15:09
  • @Andre i can't help you there, could be multiple things - jQuery version or script errors... – Alex May 15 '12 at 15:10
  • 1
    @Xander Thank you a lot! Solved it. Really appreciate it! – Andre Oliveira May 15 '12 at 15:12
  • @Xander i'am just stuck in a problem. I changed the primary color to gray, just as in the dropbox bar, and when i type something the text changes ok, but when i remove the text it doesn't come back to gray! `input { color:#ccc; }` `input:focus { color:#e7e7e7;transition:color .2s linear 0;` – Andre Oliveira May 15 '12 at 16:24
  • @Andre because you also need to change the css class definition `.typing` to gray! – Alex May 16 '12 at 15:17
  • @Andre and there is no reason to remove my accept! – Alex May 16 '12 at 15:19
  • @Xander i removed becouse i thought nobody see my posts after the post answered.. please it still not like i wanted. First, when i click inside of the input box it shoud go to the begin of the box instead of clicking somewhere in the phrase, u got me? Second,when i change the `.typing` to gray.. when somebody is typing it also gets gray, and shoudnt. Third, when i type something and erase it, the text does not appear the text `fubar` – Andre Oliveira May 16 '12 at 15:27
  • @Xander could you help me on this? – Andre Oliveira May 16 '12 at 16:05
  • @andre here you go - http://jsfiddle.net/d9CMR/7/ – Alex May 16 '12 at 16:28
  • 2
    @Andre - Stack Overflow and its community is not your personal development team. Please show a little respect for users such as Xander when they're going out of their way to help you when you haven't even demonstrated any reasonable effort to solve this by yourself. – Kev May 16 '12 at 16:31
  • 1
    @Kev I am very grateful to Xander and respecting him. He is helping me a lot in solving what I need. If I'm still here, trying to get the answer, it's because I've tried myself and failed. – Andre Oliveira May 16 '12 at 16:39
  • @Xander thanks a lot for the last update. Thats what i needed! I appreciate ur help – Andre Oliveira May 16 '12 at 16:42
3

Try this - used HTML and CSS from the Dropbox site ....

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

Manse
  • 37,765
  • 10
  • 83
  • 108
  • Nice example @ManseUK. But i dont know why it does a delay when type a word and mix the text.. – Andre Oliveira May 15 '12 at 14:38
  • @Andre changed keydown to keyup - fixes the issues for me :-) – Manse May 15 '12 at 14:40
  • +1 @manseuk well done. this is a better solution - as the caret is positioned at the beginning of the text field. Explains why the label was used instead of using the input fields value ... – Alex May 15 '12 at 14:40
  • @Xander its not perfect - but looks OK ... im sure it could be improved - just wanted to have a go at it ... there is something that makes me want to have a go when sites minify everything !!!! – Manse May 15 '12 at 14:41
  • 1
    @Xander and http://mrcoles.com/blog/css-unminify/ – Manse May 15 '12 at 14:44
  • @ManseUK in the example u provided has a delay when type a word.. would be nice if it not happen – Andre Oliveira May 15 '12 at 14:46
  • @Andre works fine for me ... what browser you using ? (Chrome 19 here) – Manse May 15 '12 at 14:48
  • @ManseUK Using Chrome 16.0.912.75 – Andre Oliveira May 15 '12 at 14:48
  • @Andre just to make sure ... you using this version : http://jsfiddle.net/d9CMR/2/ cause i updated it a couple of times :-) – Manse May 15 '12 at 14:49
  • @ManseUK yes i am trying this version.. :/ i dont know why it's not working properly.. but it's very nice styled – Andre Oliveira May 15 '12 at 14:58
  • @ManseUK ur example looks great and works fine `http://jsfiddle.net/d9CMR/2/`, but when i copy ur code to my page does not work properly. Do you know what can mbe happening? – Andre Oliveira May 16 '12 at 14:55
2

Here is an example:

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

And if you don't want to use placeholder attribute then use 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());

And if you don't want to use value attribute of input field then this might help:

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');
});
Emre Erkan
  • 8,433
  • 3
  • 48
  • 53
0

You could also use the html5 placeholder="" attribute, which has a similar effect.

And use a jquery fallback for older browser: https://github.com/mathiasbynens/jquery-placeholder

allaire
  • 5,995
  • 3
  • 41
  • 56
  • Similar, but not the same. For one, in most browsers (excluding Chrome recent), the placeholder text disappears on focus. In Chrome, where the text stays on focus, it's not dimmed. So you're right: similar. – Joseph Silber May 15 '12 at 14:00
  • Yeah, let me highlight the word similar :) – allaire May 15 '12 at 14:00
  • thanks guys! @allaire I have no experience in html5 you can make me a sample script? – Andre Oliveira May 15 '12 at 14:07
  • Right here buddy: http://davidwalsh.name/html5-placeholder – allaire May 15 '12 at 14:08
  • Grats @allaire but in this example the text does not make the effect desired. You said i could use jQuery to do that, could u give me a basic script example please? – Andre Oliveira May 15 '12 at 14:31
  • That's why I said it was similar :) Feel free to accept another answer , I just exposed a similar solution in html 5 – allaire May 15 '12 at 14:33
0

Can you try This

Javascript Code

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

HTML Text box Code

<input type="text" class="tbct" name="txtval" id="txtval" value="Enter word to search" onfocus="txtblur()"/>
Suresh kumar
  • 2,002
  • 1
  • 19
  • 28
0

You can also set a background image sprite containing the desired text to the input field if the height or width are known, and just adjust the background-position on the onfocus and onblur events.

Dan
  • 1