Password field on Login/Register page disappears upon focus in IE

[thomasgraupner]

When anyone using Internet Explorer attempts to login using a previously-created account, the password field disappears as soon as it is clicked on or brought into focus with the Tab key. The only way to log back in (without using a better browser or doing something technical) is to invoke forgotten password recovery.

This is a pretty serious problem as it discourages online event registration by a large percentage of web users.

I investigated the problem myself and found that it involves the jquery.placeholder and cakebootstrap scripts:

jquery.placeholder is used to make placeholder text automatically appear and disappear within IE. (Other browsers have built-in support for placeholder text so jquery.placeholder doesn't do anything in these browsers.) Implementing placeholder text is particularly complicated for password fields because placeholder text such as "Password" shouldn't appear as a bunch of black circles. To implement placeholder text for password fields, the jquery.placeholder script creates a second textbox and automatically hides/shows the textboxes as appropriate. This works as long as the two textboxes stay within the same div.

The cakebootstrap script (used to make things prettier) automatically wraps all non-label controls contained in input-class divs within controls-class divs with the code $('div.input').children(':not(label)').wrap('

');. When this script runs after the jquery.placeholder script, it separates the real password textbox (the one with the black circles, initially hidden by jquery.placeholder) from the placeholder password textbox. Thus, when the placeholder password textbox receives focus, it is automatically hidden (as it is supposed to be), but the real textbox can't be found and doesn't appear in its place.

I think you can fix the problem by making sure the cakebootstrap script runs before the wjr script (which contains the code $('input, textarea').placeholder();, which initializes placeholders in IE). However, I don't know if this will mess up anything else as I have very little experience with web development.

Please fix this problem.

Thank you,

Thomas Graupner Manitoba Orienteering Association

[thomasgraupner]

Thanks for fixing this.