I'm coding a fallback for browsers with no placeholder
attribute support. What I've come up with works perfectly in all browsers except IE6.
The problem is this: after focusing either of the two fields, the placeholder text disappears as expected, but I can't type or paste any text into the fields! Sometimes I get an "Error 84 - Unspecified Error" but most of the time, there is no error at all.
I've uploaded the problematic code in it's simplest form at http://jsfiddle.net/CMWHx/ (code is also below)
This really is driving me cr开发者_开发技巧azy, to the point where I'm starting to think that my copy of IE6 is dodgy (it's a MultipleIE install), so I'd appreciate it if any of you with copies of IE6 could quickly check the link above and confirm that you're experiencing the same problem as I am.
Thanks in advance :)
HTML
<input id="email_input" type="email" placeholder="Email" required="required" />
<input id="password_input" type="password" placeholder="Password" required="required" />
JavaScript (jQuery 1.6.2)
$("#email_input").val("Email").focus(function() {
if ($(this).val() == "Email")
{
$(this).val("");
}
}).blur(function() {
if ($(this).val() == "")
{
$(this).val("Email");
}
});
$("#password_input").hide().after("<input id=\"password_placeholder\" value=\"Password\" />").blur(function() {
if ($(this).val() == "")
{
$(this).hide();
$("#password_placeholder").show();
}
});
$("#password_placeholder").focus(function() {
$(this).hide();
$("#password_input").show().focus();
});
I'd appreciate it if any of you with copies of IE6 could quickly check the link above and confirm that you're experiencing the same problem as I am.
I can type in the fields on IE6. The fake placeholders disappear and what I type shows up, both when I focus with the mouse and by tabbing with the keyboard.
I saw a similar issue to what you described in a Windows 7 VM running IE6 via the old Xenocode sandboxed IEs (including the Error 84 on page load).
But then I fired up a Windows XP VM with a native, never-updated IE6, and can load your fiddle there with no errors, and the code works as intended.
So, I think you're OK here.
I tested this in IETester under IE6 and it appears to function correctly. The values in the fields were retained after clicking back and forth and i was able to type in them.
Unrelated to your issue, but as a tip you can do this by giving the input a default value, then checking the current value with the default, e.g.
<input value="email"
onfocus="if (this.value == this.defaultValue) this.value = '';"
onblur="if (this.value == '') this.value = this.defaultValue;"
... >
Of course you can implement it however you like, the above just shows the strategy.
精彩评论