CODEWITHSUNDEEP
jqueryformsfocushideblur
Stuart Robson
Stuart Robson

Reputation: 1149

blur/hide label on focus

I have this client form (coded by others) that I can't change -

<p class="postal">
    <label for="postalcode">post code</label>
    <input id="postalcode" name="postalcode" type="text" value=""/>
</p>

The existing CSS dictates that the label is set 'within' the input. So I need to blur/hide the label.

I've 'guessed' that this markup would work, but alas it doesn't.

$(document).ready(function() {
    $('#postalcode').focus(function() {
       $('label').val('');
    });
});

I can't change either the CSS or the HTML which I'm sure ateotd would be easier.

Is this possible w/ jQuery?

EDIT:

Thanks for all the answers, you lot rock! I mis-worded my query I wanted the text of the label to be hidden/cleared not the whole label. So I've 'ticked' the answer that works.

Thanks again.

Upvotes: 1

Views: 4519

Answers (4)

dfsq
dfsq

Reputation: 193261

Something like this will hide the label on focus and will show it back on blur:

$(document).ready(function() {
    $('#postalcode').focus(function () {
        $(this).prev('label').hide();
    })
    .blur(function () {
        $(this).prev('label').show();
    });
});

http://jsfiddle.net/MhLsU/

You can make it more universal if you use classes:

$('.field input').focus(function () {
    $(this).prev('label').hide();
})
.blur(function () {
    $(this).prev('label').show();
});

with HTML:

<p class="postal field">
    <label for="postalcode">post code</label>
    <input id="postalcode" name="postalcode" type="text" value="" />
</p>

http://jsfiddle.net/MhLsU/1/

Now it works not only for postalcode.

Upvotes: 0

Sri Tirupathi Raju
Sri Tirupathi Raju

Reputation: 819

if you want to hide the label

$(document).ready(function() {
    $('#postalcode').focus(function(){$('label').hide();});
});

Upvotes: 0

adeneo
adeneo

Reputation: 318182

A label does'nt have a value, it has text content, but why not just hide the previous label when the input is focused :

$(function() {
    $('#postalcode').on('focus', function() {
       $(this).prev('label').hide();
    });
});

Upvotes: 1

Adil
Adil

Reputation: 148110

Use parent .postal of current object

Live Demo

$(document).ready(function() {
    $('#postalcode').focus(function() {
       $(this).prev('label').text('');
    });
});

Upvotes: 1

Related Questions