jamesallardice/Placeholders.js

IE9 and IE8 page refresh leaves input fields blank until clicked into/out

Opened this issue · 14 comments

alexagat commented

When I load a page fresh in IE9/IE8 the script works fine and displays placeholders.
If I refresh the page after it has loaded, the input fields are blank until I click into and out of them.

Has anybody else noticed this? Fix out there?

I

alexagat commented

https://github.com/mathiasbynens/jquery-placeholder doesn't experience the issue detailed above.

spacebeers commented

Yeah I've got the same issue. Nothing till the input is clicked on and loses focus.

jamesallardice commented

I don't know what causes this. I can reproduce it but no idea on a fix yet. Will look into it further when I get a chance. If anyone else has any thoughts a PR would be welcome ;)

acarr commented

If changes to the page are made (comment out a block of HTML) and then refresh, the placeholders come back. Refreshing again, with no changes made to the HTML, causes them to break again.

figfig commented

I'm getting this issue in IE9 as well. Was there a solution?

alexagat commented

After 6 months, looks like the best solution is to use a library like the one I linked to above that doesn't experience this issue.

Oregand commented

Hi guys,

Has there been any progress on this fix?

Ive tried using the library mentioned above but that only served to amplify the amount of empty placeholders.

verde-io commented

One fix would be to briefly give focus to all inputs and textareas when the page loads.

So, using the jQuery, it would be something like:
$("input,textarea").focus().blur();

That would make the page scroll, so if you have all the content in a container, you should also temporarily make that position: fixed; to prevent the page from scrolling.

Have tested this approach and it seems to work both in IE8 and IE9.

  • 👍1
xtreemrage commented

I have the same issue: v3.1.0 (jamesallardice/Placeholders.js#v3.1.0)

mike-zarandona commented

I was able to resolve this by calling Placeholders.enable() after dynamically creating additional <input> elements. You could try something like this on page load:

window.setTimeout(function() {
    Placeholders.enable();
}, 100);
  • 👍1
fantapop commented

I'm also experiencing this. It seems like the browser is trying to be helpful and repopulating the form after refresh. In my tests, if I populate a form element this element is preserved. It seems like the other elements may be getting repopulated with empty string.

gregkerzhner commented

Ditto on @mike-zarandona solution, seems to do the trick for me.

theaspect commented

Looks like same issue #54

youngwind commented

It works! Thanks! @mike-zarandona