How to change the placeholder text using jQuery?

03 Aug, 2021
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');
$('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>
<!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:
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";
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>
<!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:
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.
jQuery-Methods
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
jQuery | children() with Examples
How to get the value in an input text box using jQuery ?
jQuery | ajax() Method
How to Convert HTML Table into Excel Spreadsheet using jQuery ?
How to get selected text from a drop-down list using jQuery?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
REST API (Introduction)
How to fetch data from an API in ReactJS ?