Question

In the code below, I would like to use jQuery to put the word "username" into the value field. Then, when the user selects the input box, the word “username” would disappear leaving an empty input field for the user to input his username.

Can this be done with jQuery?

<p class="login-username">
    <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10">
</p>

Answer 1

You can use HTML5 placeholder for that

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

And fix it for older browsers ( that’s the exact part you were asking )

$('[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();

SOURCE

---

UPDATE

To alter the HTML via jQuery and add a placeholder to an input field you can do this

$("input").prop("placeholder", "username");

DEMO