User Login Browser Auto-populate
doublejosh - May 13, 2009 - 20:35
| Project: | Compact Forms |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | critical |
| Assigned: | Unassigned |
| Status: | needs review |
Description
Noticed that when this module is applied to the user login form, and the browser auto-populates with past values, the labels are still placed over the top. Perhaps the check needs to be done "later."
Or perhaps this module needs a rewrite to use this type of approach...
<input value="title" onfocus="toggle('fieldId');" onblur="toggle('fieldId');" />...don't mean to second guess the code functionality. Several sorries.
#1
Marking as duplicate of #165608: Move the label text to the form field value. Please search for existing issues before submitting a new one. You can follow up on that issue instead to track its status. If any information from this issue is missing in the other issue, please make sure you provide it over there.
However, thanks for taking the time to report this issue.
#2
I'm marking this not a duplicate as I read through that other issue and it didn't seem to be related to the field autofill issue that I am also having. I would be more than happy to be proven wrong as long as it results in a solution.
Cheers,
Deciphered.
#3
Example image.
#4
I can confirm this in Google Chrome on Drupal 6.
#5
Here's a complete fix of this issue.
#6
+++ compact_forms.js 19 Sep 2009 17:29:49 -0000@@ -1,4 +1,4 @@
-// $Id: compact_forms.js,v 1.6 2009/08/06 20:27:22 sun Exp $
+// $Id: compact_forms.js,v 1.4 2009/05/06 23:43:39 sun Exp $
Are you sure you rolled that patch against the latest version in CVS HEAD?
I'm on crack. Are you, too?
#7
Sorry, my bad, copy-paste issue... Here's a correct patch.
#8
Even better patch attached here.
Some notes about the patch:
1. Hiding label instantly cures label flickering (regular .hide() doesn't work in safari).
2. Safari fills it's data without triggering any event, after full page load. So, I see no other way to handle it.
#9
Sorry, misspelled the function name.
#10
Probably the last patch. Firefox doesn't like .hide() by some reason.
#11
+++ compact_forms.js 19 Sep 2009 19:40:17 -0000@@ -19,7 +19,7 @@
if ($field.val() != '') {
- $label.fadeOut(1);
+ $label.css('display', 'none');
}
The next one who'll touch this code will replace this with .hide().
+++ compact_forms.js 19 Sep 2009 19:40:17 -0000@@ -50,6 +50,18 @@
+ // Chrome adds his passwords after page load, so we should track it on change.
Exceeds 80 chars.
+++ compact_forms.js 19 Sep 2009 19:40:17 -0000@@ -62,3 +74,19 @@
})(jQuery);
+
+// Safari leaves no other way to check auto-filled data.
+if ($.browser.safari) {
This compatibility code for Safari still needs to live within the jQuery closure, because $ is only safely available there.
btw, is $.browser still available in jQuery 1.3 ?
+++ compact_forms.js 19 Sep 2009 19:40:17 -0000@@ -62,3 +74,19 @@
+ $(window).load(function(){
$(window).load(), to my knowledge, is the same as $.ready(), so we should use that instead.
+++ compact_forms.js 19 Sep 2009 19:40:17 -0000@@ -62,3 +74,19 @@
+ function checkCompactForms() {
This helper function should have a JSDoc description explaining why it is needed, and the function name should be within the scope of Compact Forms and also could be more precise, either
Drupal.compactForms.fixSafari
or
Drupal.compactForms.onLoad
If you go for the latter, then the JSDoc should be generic, and inline comments should explain the tweak for Safari instead.
This review is powered by Dreditor.
#12
sun, you're killing me :)
#13
OK, heres a new one with your advices applied.
#14
Go ahead! I like your patch! :)
#15
Doesn't appear to resolve the issue I have.
When I have multiple accounts saved for a page, after I enter the user name it auto-populates the password field but doesn't hide the title, resulting in the image at #3
#16
Which browser do you use?
#17
Sorry, thought I mentioned it.
Firefox 3.5.3
#18
This patch did fix a couple bugs with Prefilled forms. But there's still a lingering issue with Autofill.
Video attached. Shows Firefox first then Safari.
http://screenr.com/DiB
#19
I hope this helps. If Firefox remembers your password and you clear the password field then shift+tab out to the username field and tab back in to the password field Firefox re-enters your password. This is not equal to '' and so the label doesn't fade out.
Below we store the default value (the prepopulated value from Firefox) and compare to this...
Around line 14
var $label = $(this);
var $field = $('#' + $label.attr('for'));
if ($field.attr('type') != 'text' && $field.attr('type') != 'password') {
return;
}
var $default_value = $field.val();
if ($default_value != '') {
$label.fadeOut(1);
}
Around line 40
$field.focus(function () {
if($(this).val() === $default_value || $(this).val() === '') {
$label.fadeOut('fast');
}
});
$field.blur(function () {
if($(this).val() === '') {
$label.fadeIn('slow');
}
});
I wonder however what would happen if you had more than one user's password stored