[UPDATE] Hide label when focus on input

Here is a way to hide a label when you focus on an input. There are many ways to do that, but I’ve used a label positioned absolute over the input, and some jQuery to hide and show it. It works even if some of the fields are pre-filled.

1. The Markup

<form>
  <div>
    <label for="click_here">Click here</label>
    <input type="text" id="click_here"/>
  </div>
</form>

2. The CSS

.form-row { position: relative; }
.label-hide {
  position: absolute;
  left: 10px;
  top: 3px;
  font-family: Arial;
}
input {
  height: 15px;
  line-height: 15px;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #cecece;
}

3. The jQuery

$(function() {
  $('.label-over').each(function() {
    var elem = $(this);
    $('label[for="' + $(this).attr('id') + '"]').click(function() {
      elem.focus();
    });
    if ($(this).val() != '') {
      $('label[for="' + $(this).attr('id') + '"]').hide();
    }
  }).focus(function() {
    $('label[for="' + $(this)[0].id + '"]').hide();
  }).blur(function() {
    if($(this).val() == '') {
      $('label[for="' + $(this)[0].id + '"]').show();
    }
  }).change(function(){
    if($(this).val() != '') {
      $('label[for="' + $(this)[0].id + '"]').hide();
    }
  })
})
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s