JavaScript Change Placeholder Text

Table of Contents

You can use the following JavaScript code snippets to change the placeholder text.

// Option #1 - Plain JS
document.getElementById("someId").placeholder = "newText";

// Option #2 - jQuery
$("#somId").attr("placeholder", "newText");

Now let’s look at some other ways we can work with these techniques. We will also be using some of these strategies to build a little application at the end of the post.

Different ways to change the placeholder text

There are a few ways we can achieve this. First lets look at using plain JavaScript.

1. Change placeholder text with plain JavaScript

You may be using some framework in your application, but it is always good to know how to do things in plain JavaScript. In the code example below we use the snippet from above but we place it in a function. This way you can reuse the functionality in many different

function changePlaceholderText(id, newText){
    document.getElementById(id).placeholder = newText;
}

2. Change placeholder text with jQuery

If you want to use jQuery to change the placeholder text you can do that too. jQuery works similar too regular JS, in that you have to first grab the element and then work with some property on that element.

function changePlaceholderText(id, newText){
    $("#" + id").attr("placeholder", newText);
}

Building our application

Lets build our application where we use JavaScript to replace placeholder text. In this application we will have two input boxes and a button. The first input box will have the placeholder, but it will be set to not be editable. The second input box is where we will allow the user to enter a new placeholder text. When the user hits the button we will take the input from input box two and update the placeholder text in input box number one.

The things we need

  1. Two input boxes
  2. One button

Adding our input boxes

<input id="placeholderBox" placeholder="someText" readonly></input>

<input id="userInput"></input>

Adding our button

<button id="updatePlaceholderText">Update</button>

Adding the JavaScript code

Finally lets add the actual JavaScript code that will perform the logic.

var button = document.getElementById("updatePlaceholderText"); 

button.addEventListener("click", function(){
    var input = getInput(userInput);
    changePlaceholderText(input);
}

function getInput(id){ 
    return document.getElementById(id).value; 
}

function changePlaceholderText(id, newText){
    document.getElementsById(id).placeholder = newText;
}

Working application

That is it, we now have an application where we can change the placeholder text build using JavaScript.

If you want to learn more about JS then you should check out this post on how to get the current time and how to get input value.

When might you use this

Usually you set the place holder text on an element, but sometimes you might want to change it dynamically. If you are using something like Razor pages or php then you can do this before the page is returned to the user, but sometimes you just have a static page that you want to do something with using Js. You might want to do this using JS if you want the placeholder text to change based on some previous user input. For example, if you have a drop down menu where the user can select something, and based on what they select you will accept certain input in a text box. You can change the placeholder text to give a better hint of what is accepted by the page so that the user knows what to type.

Related Guides