Update placeholder text with new text onClick/onFocus

Question

Here is one I just had come up and the solution baffled me and no search here at SO revealed anything.

Standard input field:

<input type="input" name="fName" placeholder="Your First Name">

But let us say I would like to update the placeholder text when somebody clicks on the field or when the field is onfocus via pressing the Tab key.

So it would become:

<input type="input" name="fName" placeholder="Your First Name Goes Here">

Just a very basic example of what it would do, by adding the "Goes Here" to the placeholder text.

Doable? Even possible to modify placeholder? Unknown to me.

If so and it is possible via pure JS or via jQuery, I would be entertained in seeing how.

score 4 · Accepted Answer · answered Jun 27 '14 at 19:22

4

This should do it (edit:added blur reset):

$('input[name=fName]').on("click focus",function(){
    $(this).attr("placeholder","Your First Name Goes Here");
}).on("blur",function(){
    $(this).attr("placeholder","Your First Name");
});

Updated Fiddle: http://jsfiddle.net/6tb8v/1/

answered Jun 27 '14 at 19:22

StaticVoid

1,539
10
11

1

You should probably add a `blur` event to reset the placeholder value – zgood Jun 27 '14 at 19:24
That is really dang neat - this was just something that I thought would be fun. Might not ever use it, but could be fun and seriously helpful in some situation. Did not figure that "placeholder" would be an acceptable attribute that could be modified. Thanks StaticVoid! – Abela Jun 27 '14 at 19:32
Yep, every attribute can be accessed this way. You can even come up with your own attributes to use however they makes sense! Like this: http://jsfiddle.net/99RVH/ – StaticVoid Jun 27 '14 at 19:36
Hey @StaticVoid I am not getting this to work in IE 11 which supports placeholder. Solutions? (I am using/including html5shiv if that matters) – Abela Jul 13 '14 at 17:01
This is the default behavior as mentioned here: http://stackoverflow.com/questions/14445891/keep-placeholder-on-focus-in-ie10 Although this references ie10, the same persists in 11. See the answer in this link for the workaround. IE sux. – StaticVoid Jul 14 '14 at 12:43
1

I've modified the placeholder to use the value instead and styled it a little. This is a hackjob, but it works. You'll have to disallow the two values in a custom validation prior to form submit. http://jsfiddle.net/6tb8v/4/ – StaticVoid Jul 14 '14 at 13:19
wow, how flipping sad is that... have to totally by-pass html5 standards in order to get IE to work. how typical. Crazy StaticVoid, just crazy. – Abela Jul 18 '14 at 19:03

score 0 · Answer 2 · answered Jun 27 '14 at 19:34

To do it in pure JS, you should use addEventListener() to get the click/focus event and setAttribute() to set the placeholder attribute.

var elem = document.getElementsByName("fName")[0];
function appendPlaceholder () {
    elem.setAttribute ("placeholder", "Your First Name Goes Here");
}
elem.addEventListener("click", appendPlaceholder);
elem.addEventListener("focus", appendPlaceholder);
elem.addEventListener("blur", function () {
    elem.setAttribute ("placeholder", "Your First Name");
});

score 0 · Answer 3 · answered Jun 27 '14 at 19:35

Here's a JS answer. I tend to dislike JQuery.

var myInpt = document.getElementsByTagName('input');

var key;

for(key in myInpt)
{
   myInpt[key].addEventListener('click', updateInpt, true);
}

function updateInput(evt)
{
   this.inpt = evt.srcElement;
   var plchldrText = this.inpt.getAttribute('placeholder');
   this.inpt.setAttribute('placeholder', plchldrText + ' Goes Here');
}

Of course, this attaches the click event to every input element on your page, as well as every time you click it, it adds the string ' Goes Here'. Haha. If you want to do it this way, maybe you should add an id to the input and collect it in JS that way. Just a thought and a simple example! Hope it helps!

Update placeholder text with new text onClick/onFocus

3 Answers3