Put placeholder using jQuery/Javascript

Question

I can put a placeholder through jQuery if there is a single <input> on the page:

<input type="text"/>

$(document).ready(function() {
    placeholders();
    function placeholders() {
        $('input[type=text]').each(function() {

            $(this).attr('placeholder', 'hello' );
        });
    }
});

However, I have multiple <input> fields in a single page as below:

<input type="text" class="first">
<input type="text" class="second">

I wish to add a placeholder only on the first <input type="text"> that has class="first".

How can I add a placeholder to the first matching text input only?

void · Accepted Answer · 2015-12-17 07:27:39Z

3

$('input[type=text].first').attr('placeholder', 'hello' );

Here input will select all the input tag, [type=text] will select input whose type is text and then .first will select a subset with class first.

If you want to select the first input with first class then do $('input[type=text].first').first()

answered Dec 17, 2015 at 7:27

void

36.8k10 gold badges72 silver badges111 bronze badges

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

Comments

guest271314 · Accepted Answer · 2015-12-17 07:39:05Z

1

I wish to add a placeholder only on the first that has class="first".

How can I add a placeholder to the first matching text input only?

Try using document.querySelector() with selector "input[type=text][class=first]" , setAttribute()

function placeholders() {
  document.querySelector("input[type=text][class=first]")
  .setAttribute("placeholder", "hello");
}

$(document).ready(placeholders);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="first">
<input type="text" class="second">

answered Dec 17, 2015 at 7:39

guest271314

1

Comments

gurvinder372 · Accepted Answer · 2015-12-17 07:27:53Z

1

$('input[type=text].first').attr('placeholder', 'hello' );

using the class selector

edited Dec 17, 2015 at 7:27

answered Dec 17, 2015 at 7:26

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Muhammad Atif · Accepted Answer · 2015-12-17 07:29:44Z

1

You can try this solution:
$('input[type=text].first').attr('placeholder', 'hello' );

edited Dec 17, 2015 at 7:29

answered Dec 17, 2015 at 7:27

Muhammad Atif

1,1221 gold badge10 silver badges22 bronze badges

Comments

Raja Sekar · Accepted Answer · 2015-12-17 07:31:12Z

0

if you want an element specific script, use ID instead of CLASS for better performance.

<input type="text" class="first" id="first">

$("#first").attr('placeholder', 'hello' );

answered Dec 17, 2015 at 7:31

Raja Sekar

2,14017 silver badges23 bronze badges

Collectives™ on Stack Overflow

Put placeholder using jQuery/Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related