How can I change the placeholder text of an input element?
For example I have 3 inputs of type text.
<input type="text" name="Email" placeholder="Some Text">
<input type="text" name="First Name" placeholder="Some Text">
<input type="text" name="Last Name"placeholder="Some Text">
How can I change the Some Text text using JavaScript or jQuery?
This question is related to
javascript
jquery
html
If you wanna use Javascript then you can use getElementsByName() method to select the input fields and to change the placeholder for each one... see the below code...
document.getElementsByName('Email')[0].placeholder='new text for email';
document.getElementsByName('First Name')[0].placeholder='new text for fname';
document.getElementsByName('Last Name')[0].placeholder='new text for lname';
Otherwise use jQuery:
$('input:text').attr('placeholder','Some New Text');
Using jquery you can do this by following code:
<input type="text" id="tbxEmail" name="Email" placeholder="Some Text"/>
$('#tbxEmail').attr('placeholder','Some New Text');
Try accessing the placeholder attribute of the input and change its value like the following:
$('#some_input_id').attr('placeholder','New Text Here');
Can also clear the placeholder if required like:
$('#some_input_id').attr('placeholder','');
For JavaScript use:
document.getElementsByClassName('select-holder')[0].placeholder = "This is my new text";
For jQuery use:
$('.select-holder')[0].placeholder = "This is my new text";
This solution uses jQuery. If you want to use same placeholder text for all text inputs, you can use
$('input:text').attr('placeholder','Some New Text');
And if you want different placeholders, you can use the element's id to change placeholder
$('#element1_id').attr('placeholder','Some New Text 1');
$('#element2_id').attr('placeholder','Some New Text 2');
var input = document.getElementById ("IdofInput");
input.placeholder = "No need to fill this field";
You can find out more about placeholder here: http://help.dottoro.com/ljgugboo.php
I have been facing the same problem.
In JS, first you have to clear the textbox of the text input. Otherwise the placeholder text won't show.
Here's my solution.
document.getElementsByName("email")[0].value="";
document.getElementsByName("email")[0].placeholder="your message";
Source: Stackoverflow.com