Open In App

How to Change the Placeholder Text using jQuery?

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

We can change the placeholder Text of an input element using the attr() attribute and placeholder property of jQuery. We will create a button and on clicking the button the text of the placeholder will be changed dynamically.

Below are the approaches to change the placeholder text using jQuery:

Approach 1: Using attr() attribute

  • The attr() method is used to set or return the specified attribute of a selected element.
  • It takes two arguments: the first is the attribute to be set, and the second is the value to change it to.
  • The placeholder attribute controls the text displayed as a placeholder in an input field.
  • To change the placeholder, pass "placeholder" as the first argument and the new text as the second argument to the attr() method.
  • This will update the placeholder text of the selected input element.

Syntax:

$('selectedTextarea').attr('placeholder', 'Placeholder text');

Example:

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        Changing Placeholder text
    </title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <b>
        Changing Placeholder text
    </b>
    <p>
        Click the button to change placeholder
        of the textarea.
    </p>
    <textarea id="area1" placeholder="Default Text"></textarea>
    <br>
    <button onclick="changePlaceholder()">
        Change Placeholder
    </button>

    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
    <script type="text/javascript">
        function changePlaceholder() {
            $('#area1').attr('placeholder',
                'This is a new placeholder');
        }
    </script>
</body>

</html>

Output:

GIF

Approach 2: Using placeholder property

Using the placeholder property. The "placeholder" property is used to get or set the placeholder of an input text. This can be used to change the placeholder text to a new one. The element is first selected using a jQuery selector. The new placeholder text can then be assigned to the element's placeholder property. This will change the placeholder text of the element to the new text.

Syntax:

selectedTextarea = $('selectedTextarea')[0];
selectedTextarea.placeholder = "Placeholder text";

Example:

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        Changing Placeholder text
    </title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
     GeeksforGeeks
    </h1>
    <b>
     Changing Placeholder text
    </b>
    <p>
     Click the button to change placeholder 
     of the textarea.
    </p>
    <textarea id="area1" placeholder="Default Text"></textarea>
    <br>
    <button onclick="changePlaceholder()">
        Change Placeholder
    </button>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
    <script type="text/javascript">
        function changePlaceholder() {
            selectedTextarea = $('#area1')[0];

            selectedTextarea.placeholder =
                "This is a new placeholder";
        }
    </script>
</body>

</html>

Output:

GIF

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.


Similar Reads