Placeholder vanish after click on Reset button in IE8

Question

I have a form where an admin can add candidates. When I run my application in IE8, and click on reset button, it removes placeholder from all the fields. I am using placeholder.js to support placeholder property in IE8.

Here is my reset function ...

 function resetCandidateData(){
    $("#addCandidateForm")[0].reset();
 }

My form is like that ....

<form name="addCandidateForm" id="addCandidateForm" method="Post">
     <input type="text" name="cname" id="cname" class="inputBox bdr-radius5" placeholder="Enter candidate name" autocomplete="off"/>
     .....
     .....
     <span class="global-button" onclick="resetCandidateData();">Reset</span>
</form>

First time when page refresh, it showing placeholder in each of my textfields in IE8 but after reset all are vanish. Please help.

Answer 1

Change your resetCandidateData function to

function resetCandidateData(){
    $("#addCandidateForm")[0].reset();
    $.Placeholder.init();
}

It should restore the placeholders.

Answer 2

I don't know anything about the specific placeholder.js library that you're using, and you didn't provide a link, so I can't even tell which one it is.

However, it sounds to me like you need to use a better placeholder script.

If resetting the fields clears the placeholders, then it means that the script is using the field value to display the placeholder.

This is fine, but does have some limitations, in particular as you've seen with resetting the fields, but it also means that you can't have placeholders on a password field (because they would show up as stars like the password itself), and you can't easily have the placeholder styled differently to the field values.

For all these reasons, I prefer a placeholder script that uses a different technique - eg putting the placeholder in its own element and displaying it on top of (or behind) the input field, rather than actually using the input field itself for the placeholder.

So therefore my advice is to find an alternative placeholder script. It should be fairly straightforward to take one out and plug another one in, and there are plenty of them out there to pick from. Take a look here for a list of some of the best ones.

Hope that helps.