JavaScript Change Placeholder Text

TL;DR: Here is a code snippet you can use to change the placeholder text using JavaScript. There is an application in the post showing how this can be used.

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

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

Before we make our application, let us look at some of the ways we can change the placeholder text.

Different ways to change the placeholder text

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

Change placeholder text with plain JavaScript

Depending on your application, you might get away with using just regular JS, not having to import jQuery. Lets take a look at how we can use regular JS to change the placeholder.

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

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.

Last Updated: by Ole