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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>
        <script type="text/javascript">
            function changePlaceholder() {
                $('#area1').attr('placeholder',
                    'This is a new placeholder');
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:
    • Before clicking the button:
      attr-before
    • After clicking the button:
      attr-after

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>
        <script type="text/javascript">
            function changePlaceholder() {
                selectedTextarea = $('#area1')[0];
      
                selectedTextarea.placeholder =
                    "This is a new placeholder";
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:
    • Before clicking the button:
      attr-before
    • After clicking the button:
      attr-after



My Personal Notes arrow_drop_up

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.