To change the placeholder text of an input element with JavaScript, we can set the placeholder
property of an element.
For instance, if we have the following input elements:
<input type="text" name="Email" placeholder="Some Text">
<input type="text" name="firstName" placeholder="Some Text">
<input type="text" name="lastName" placeholder="Some Text">
Then we can set the placeholder attribute value for each input element by writing:
document.getElementsByName('Email')[0].placeholder = 'new text for email';
document.getElementsByName('firstName')[0].placeholder = 'new text for fname';
document.getElementsByName('lastName')[0].placeholder = 'new text for lname';
We call document.getElementsByName
to get the element with the given name
attribute value.
Then we use index 0 to get the first element returned.
Next, we set the placeholder
property of each to a string with the new placeholder
property value.
And now we see the text we set in the JavaScript code is displayed as the placeholder text.