CODEWITHSUNDEEP
jquery
J82
J82

Reputation: 8457

Use jQuery to insert values into input fields?

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>

Upvotes: 1

Views: 12881

Answers (8)

Zoltan Toth
Zoltan Toth

Reputation: 47667

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

Upvotes: 4

silasjmatson
silasjmatson

Reputation: 1814

The placeholder attribute is probably what you want, but to answer your question:

$(".login-username input").val("username");
$(".login-username input").on("focus", function() {
  if($(this).val() == "username") {
    $(this).val("");
  }
}).on("blur", function() {
  if($(this).val() == "") {
    $(this).val("username");
  }
});

Upvotes: 1

kravits88
kravits88

Reputation: 13049

You can just use simple javascript:

<p class="login-username">
<input type="text" name="log" id="user_login" class="input" value="Username" size="20" tabindex="10" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</p>

Upvotes: 0

James Hill
James Hill

Reputation: 61792

Option 1: jQuery Plugin (or write it yourself)

There are several default text plugins to choose from. I'm partial to this one: http://www.examplet.buss.hk/jquery/defaultText.php.

Option 2: HTML5 placeholder attribute

Utilize the placeholder attribute (HTML5). Using placeholder on supported browsers will give you the functionality you desire.

<input type="text" id="user_login" placeholder="username" />

If you choose to go the placeholder route, you can style your default text like this:

input::-webkit-input-placeholder {
    color:    #999;
}
input:-moz-placeholder {
    color:    #999;
}
input:-ms-input-placeholder {
    color:    #999;
}

See this SO question for additional details.

Note: Be aware that placeholder is not supported in all browsers. You can view supported browsers here.

Upvotes: 0

Erdin&#231; &#199;orbacı
Erdin&#231; &#199;orbacı

Reputation: 1213

If you use XHTML

var user_login_text="Username";
$("#user_login").val=user_login_text;
$("#user_login").focus(function(){
    $(this).val("");
}).blur(function(){
    $(this).val(user_login_text);
});

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

$("#user_login").val("username");


$("#user_login").focus(function(){
    $(this).val("");
});

Working example: http://jsfiddle.net/jbB35/

Upvotes: 1

cjc343
cjc343

Reputation: 3765

With HTML5 you can simply set placeholder="username" and modern browsers will handle this automatically. To catch the stragglers, there are many shim or shiv scripts such as this one or this one that provide placeholder support for non-HTML5-compliant browsers.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

You don't need jQuery for this. You could just use the placeholder attribute.

From Dive into HTML5:

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty. When you click on (or tab to) the input field and start typing, the placeholder text disappears.

http://diveintohtml5.info/forms.html#placeholder

Upvotes: 0

Related Questions