Use jQuery to insert values into input fields?

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>

What about HTML `placeholder` attribute?. Then use a polyfill for old browsers. Done. — elclanrs, Nov 20 '12 at 00:57

Zoltan Toth · Accepted Answer · 2012-11-20T01:31:59.483

4

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

edited Nov 20 '12 at 01:31

answered Nov 20 '12 at 00:57

Zoltan Toth

46,981
12
120
134

Thank you, but I was hoping you could provide me a way to insert the 'placeholder' attribute into the html using jQuery as I don't want to mess with any core files. – J82 Nov 20 '12 at 01:27
^ That defeats the purpose of asking for html5 then if you don't want to use any html. – Bankzilla Nov 20 '12 at 01:31
@John updated my answer - it's really easy to add the placeholder via jQuery – Zoltan Toth Nov 20 '12 at 01:32
@Bankzilla I've added the HTML tag because of the `placeholder` but it turned out that the OP doesn't want to change his HTML, so just deleted the tag – Zoltan Toth Nov 20 '12 at 01:35
Was referring to the OP, your answer is spot on +1. – Bankzilla Nov 20 '12 at 01:37

silasjmatson · Answer 2 · 2012-11-20T01:09:07.967

1

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");
  }
});

edited Nov 20 '12 at 01:09

answered Nov 20 '12 at 00:59

silasjmatson

1,814
18
37

-1, what happens if the control gains focus and then loses it again? The default text only works once. – James Hill Nov 20 '12 at 01:05
If you bind to every focus event, what you've input previously will be cleared. That was why I went with the .one() binding. – silasjmatson Nov 20 '12 at 01:06
1

My point is that if the user puts focus on the field, and then removes it without entering text, the placeholder text will not return. This is not a good solution. – James Hill Nov 20 '12 at 01:08
My apologies. I posted hurriedly and it was the bare minimum. My edit fixes that. – silasjmatson Nov 20 '12 at 01:13

score 1 · Answer 3 · answered Nov 20 '12 at 00:59

1

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


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

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

answered Nov 20 '12 at 00:59

Kevin Bowersox

93,289
19
159
189

score 0 · Answer 4 · edited May 23 '17 at 11:43

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.

score 0 · Answer 5 · answered Nov 20 '12 at 00:57

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

score 0 · Answer 6 · answered Nov 20 '12 at 00:59

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.

score 0 · Answer 7 · answered Nov 20 '12 at 01:02

0

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);
});

answered Nov 20 '12 at 01:02

Erdinç Çorbacı

1,187
14
17

score 0 · Answer 8 · answered Nov 20 '12 at 01:07

0

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>

answered Nov 20 '12 at 01:07

kravits88

12,431
1
51
53

Use jQuery to insert values into input fields?

8 Answers8