102

How can I change the placeholder text of an input element?

For example I have 3 inputs of type text.

<input type="text" name="Email" placeholder="Some Text">
<input type="text" name="First Name" placeholder="Some Text">
<input type="text" name="Last Name"placeholder="Some Text">

How can I change the Some Text text using JavaScript or jQuery?

Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
xknozi
  • 1,335
  • 3
  • 12
  • 20

8 Answers8

186

If you wanna use Javascript then you can use getElementsByName() method to select the input fields and to change the placeholder for each one... see the below code...

document.getElementsByName('Email')[0].placeholder='new text for email';
document.getElementsByName('First Name')[0].placeholder='new text for fname';
document.getElementsByName('Last Name')[0].placeholder='new text for lname';

Otherwise use jQuery:

$('input:text').attr('placeholder','Some New Text');
Dr. Ehsan Ali
  • 4,735
  • 4
  • 23
  • 37
Naz
  • 2,520
  • 2
  • 16
  • 23
  • 39
    +1 for going native without using external libraries ... people need to pay attention to the DOM APIs you might not need to use a whole library just to do something simple like that. – Ahmad Alfy Nov 22 '12 at 06:05
  • 1
    Often the field already contains a value, so the placeholder will not be visible. You must clear the value. `var email = document.getElementsByName("Email")[0];` `email.value='';` `email.placeholder='new text for email';` – askrynnikov Sep 07 '17 at 08:07
30

This solution uses jQuery. If you want to use same placeholder text for all text inputs, you can use

$('input:text').attr('placeholder','Some New Text');

And if you want different placeholders, you can use the element's id to change placeholder

$('#element1_id').attr('placeholder','Some New Text 1');
$('#element2_id').attr('placeholder','Some New Text 2');
arulmr
  • 8,620
  • 9
  • 54
  • 69
17
var input = document.getElementById ("IdofInput");
input.placeholder = "No need to fill this field";

You can find out more about placeholder here: http://help.dottoro.com/ljgugboo.php

Jimmy T.
  • 4,033
  • 2
  • 22
  • 38
padma
  • 171
  • 1
  • 2
6

Using jquery you can do this by following code:

<input type="text" id="tbxEmail" name="Email" placeholder="Some Text"/>

$('#tbxEmail').attr('placeholder','Some New Text');
Rusty
  • 1,303
  • 2
  • 14
  • 28
4

I have been facing the same problem.

In JS, first you have to clear the textbox of the text input. Otherwise the placeholder text won't show.

Here's my solution.

document.getElementsByName("email")[0].value="";
document.getElementsByName("email")[0].placeholder="your message";
jarlh
  • 42,561
  • 8
  • 45
  • 63
Lulu Pte
  • 51
  • 2
  • That's right. Without setting the field to blank first, the placeholder doesn't show up. Spent a long long time on this until I bumped on this post. – User12345 Sep 13 '15 at 05:20
2

In your javascript file

document.getElementsByName('Email')[0].placeholder = 'new text for email';

Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
Pratik Rana
  • 19
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 08 '22 at 03:52
0

Try accessing the placeholder attribute of the input and change its value like the following:

$('#some_input_id').attr('placeholder','New Text Here');

Can also clear the placeholder if required like:

$('#some_input_id').attr('placeholder','');
Xantium
  • 11,201
  • 10
  • 62
  • 89
Rajitha Alluri
  • 97
  • 1
  • 3
0

For JavaScript use:

document.getElementsByClassName('select-holder')[0].placeholder = "This is my new text";

For jQuery use:

$('.select-holder')[0].placeholder = "This is my new text";
Murtaza Manasawala
  • 697
  • 7
  • 14