Place Holder should be visible until type in textbox

Problem

I have a simple question regarding usability...

Currently am working Mobile Application using HTML5 and PhoneGap. Here I need to show the placeholder until user type something in that text-box. Placeholder should be visible if he didn't type anything but focus on that Text-box. This is because users typically press the tab before reading the next field in which case the empty text is already gone and the user has harder time knowing what to type. like Twitter Login Page Can we do same in my application using HTML5 features?

Its works fine (not hide when Focus)in Browsers... but not in Mobile

Is there any solution for this??...

enter image description here

Problem courtesy of: ULLAS MOHAN.V

Solution

This will preserve the text until the user starts typing:

Demo: http://jsfiddle.net/tymeJV/JERQf/2/

<input type="text" id="test" value="Im a placeholder!"/>

var placeholder = $("#test").val();

$("#test").keydown(function() {
    if (this.value == placeholder) {
        this.value = '';
    }
}).blur(function() {
    if (this.value == '') {
        this.value = placeholder;
    }
});

I also added a blur() function, if the user enters nothing, then it fills the field with the placeholder again.

Solution courtesy of: tymeJV

Discussion

Here is a good cross-browser solution utilizing Modernizr for fallback

<input type="text" placeholder="search text" />

 

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

</script>
Discussion courtesy of: Josh Bedo

This recipe can be found in it's original form on Stack Over Flow.