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
– elclanrs, Commented Nov 20, 2012 at 0:57

Zoltan Toth · Accepted Answer · 2012-11-20 01:31:59Z

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, 2012 at 1:31

answered Nov 20, 2012 at 0:57

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

J82 Over a year ago

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.

Bankzilla Over a year ago

^ That defeats the purpose of asking for html5 then if you don't want to use any html.

Zoltan Toth Over a year ago

@John updated my answer - it's really easy to add the placeholder via jQuery

Zoltan Toth Over a year ago

@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

Bankzilla Over a year ago

Was referring to the OP, your answer is spot on +1.

Kevin Bowersox · Accepted Answer · 2012-11-20 00:59:28Z

1

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


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

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

answered Nov 20, 2012 at 0:59

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

silasjmatson · Accepted Answer · 2012-11-20 01:09:07Z

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, 2012 at 1:09

answered Nov 20, 2012 at 0:59

silasjmatson

1,81418 silver badges37 bronze badges

4 Comments

James Hill Over a year ago

-1, what happens if the control gains focus and then loses it again? The default text only works once.

silasjmatson Over a year ago

If you bind to every focus event, what you've input previously will be cleared. That was why I went with the .one() binding.

James Hill Over a year ago

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.

silasjmatson Over a year ago

My apologies. I posted hurriedly and it was the bare minimum. My edit fixes that.

Jason Gennaro · Accepted Answer · 2012-11-20 00:57:55Z

0

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

answered Nov 20, 2012 at 0:57

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

cjc343 · Accepted Answer · 2012-11-20 00:59:15Z

0

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.

answered Nov 20, 2012 at 0:59

cjc343

3,7751 gold badge34 silver badges36 bronze badges

Comments

Erdinç Çorbacı · Accepted Answer · 2012-11-20 01:02:34Z

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, 2012 at 1:02

Erdinç Çorbacı

1,21315 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:10Z

0

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.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Nov 20, 2012 at 0:57

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

Comments

kravits88 · Accepted Answer · 2012-11-20 01:07:31Z

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, 2012 at 1:07

kravits88

13.1k1 gold badge53 silver badges54 bronze badges

Collectives™ on Stack Overflow

Use jQuery to insert values into input fields?

8 Answers 8

5 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related