How to change the placeholder text using jQuery?

The placeholder text is the text output for the user what is that input for. Like in HTML, we use Name as an input field and place a text inside that space i.e. Enter your name. Like shown in the below image:

Name:

So we want a button or some event that will change that placeholder text into some other text. To do that we have 2 methods that are described below:

Method 1: In this method we will use the attr() method. 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 of the attribute to be changed to.

The “placeholder” attribute controls the text that will be shown as a placeholder in an input area. This attribute is passed as the first argument to the attr() method. The required text to be set is passed as the second argument. This will change the placeholder text of the element to the new text.

Syntax:

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

Example:

<!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:
- Before clicking the button:
- After clicking the button:

Method 2: 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:

<!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:
- Before clicking the button:
- After clicking the button:

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.

Article Tags :

JQuery

Web Technologies

jQuery-Methods