Geek asks and answers

Make a hint in the text box disappears / appears again when the user enters / erases

Does anyone know how I can do this in my search bar: https://www.dropbox.com/help

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

I mean the effect of onFocus and onBlur when the text disappears and appears dynamically.

Thanks guys!

+3
source share
6 answers

They use CSS animation in the color property:

Excerpt from 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 simulate the effect using the pseudo-selector :focusin the input field with the previously specified definitions.

If for some reason I was not clear enough :)

http://jsfiddle.net/d9CMR/

More reliable solution:

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

Update (with correct color change):

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

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

- HTML CSS Dropbox....

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

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

html5 placeholder = "", .

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

0
source

You can try this

Javascript Code

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

HTML Code Text Box

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

You can also set the sprite of the background image containing the desired text in the input field if the height or width is known, and simply adjust the background position in the onfocus and onblur events.

0
source

More articles:


All Articles