All right, this one is going to sound very weird and I don't know if any of you have experienced the same problem.
I have a very simple login form (in html) which includes username, password and submit button and works fine on IE but when I run it in Firefox (3.xxx) and click on password textfield, the focus jumps on username and selects the text. What's even more I can easily navigate using the keyboard but not with the mouse click.
Just curious, does anyone else have this problem and perhaps a solution, or is it just me?
Thanks for your time and help!
Uran
You probably did something like the following:
<label for="username">
Username: <input type="text" id="username" name="username" />
</label>
<label for="username">
Password: <input type="password" id="password" name="password" />
</label>
Notice how the second label is still marked for="username". Make sure the for attribute matches the proper field. Also, when the input tags are nested in label you technically don't need to specify a value for for.
The second option is that you did something like the following:
<label>
Username: <input type="text" id="username" name="username" /><br />
Password: <input type="password" id="password" name="password" />
</label>
In this case, the focus is given to the first input. When using input nested inside a label tag, makes sure there is only one inside the said label.
Related
In a website I have created a page to change the user's password to a new one. Obviously, the current username does not need to be typed again by the user therefore there is no input field for the username.
Of course, Chrome understands that this is a new password and suggests to save it but it cannot find out what the username is.
I tried like this:
<input id="psw" name="psw" type="password" autocomplete="new-password">
<input id="psw_confirm" name="psw_confirm" type="password" autocomplete="new-password">
and like this:
<input id="usr" name="usr" type="hidden" value="username" autocomplete="username">
<input id="psw" name="psw" type="password" autocomplete="new-password">
<input id="psw_confirm" name="psw_confirm" type="password" autocomplete="new-password">
to no avail.
How should I indicate the current username in a way the browser can understand properly?
Unfortunately, I don't think that <input type="hidden" /> will trigger Chrome password manager, as it's designed to catch type='text' inputs only. That said, you should be fine using a standard text input with the display:none css property set:
<input id="usr" name="usr" type="text"
value="username" style="display: none;" />
I also think that your scenario (password change) is not an ideal one for the autocompletion feature, therefore I would also switch that attribute off (it won't affect the Chrome password manager).
Here's a jsfiddle with a working sample.
I have an edit-user form:
<form method="post" action="index.php" />
Email:
<input type="text" name="email" value="user#domain.com" />
Password:
<input type="password" name="password" value="thesavedpassword" />
</form>
Safari overwrites my pre-filled username and password for me, so I added all the autocomplete options - this didn't work.
Reading on here, I hear that readonly has worked for some, so I tried that too, but that still doesn't work. Here is what the code looks like with all that in:
<form method="post" action="index.php" autocomplete="off" />
Email:
<input type="text" name="email" value="user#domain.com"
autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />
Password:
<input type="password" name="password" value="thesavedpassword"
readonly autocomplete="off" onfocus="this.removeAttribute('readonly');" />
</form>
I'm really not sure where to go from here! Why would Safari overwrite fields that are already filled in?
Many thanks in advance!
The password management engine will kick in as soon as it detects a password field and once it has, it will look for the nearest text field before the password field and assume that one to be a username field.
The autocomplete attribute is ignored by most browsers but I have read that setting it to "false" rather than "off" has worked for some (not me).
There is no clean solution to this. The only thing that has worked for me is to introduce hidden dummy fields for safari to populate.
I have created a simple form in HTML which has two fields: Username and Password, and then a Log in button.
When I run the page in Chrome it fills the two fields with my XAMPP-phpmyadmin username and password into the fields and highlights them yellow.
How can I completely remove this so they are blank. Thanks
HTML form code:
<html>
<form action= "entryformlogon.php" method = "post" autocomplete="off">
Username: <input type="text" name="Username"><br>
Password: <input type="password" name="Password"><br>
<input type="submit" value="Log in">
</form>
</html>
autocomplete= "off" must be added to every input element. i.e.
<input type="text" name="Username" autocomplete="off">
Chrome it fills the two fields with my XAMPP-phpmyadmin username and password into the fields and highlights them yellow. How can I completely remove this so they are blank. #Charley Baker
This readonly-fix worked for me:
fix browser autofill in: readonly and set writeble on focus (at mouse click and tabbing through fields)
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>
By the way, some more information on Chrome and Safari auto fill behaviour:
Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field. I guess, the Chrome and Safari look for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not directly control it, but the read-only trick above fixes it. :-)
For latest version of chrome
<input type="password" name="whatever" autocomplete="new-password" />
older version
<input type="password" name="whatever" autocomplete="false" />
or
<input type="password" name="whatever" autocomplete="off" />
I have a html input field for which I would like to provide some additional information when typing in this field or hovering the mouse over it. I have tried the following construct:
<input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" tabindex="2" maxlength="8" class="input">
but nothing happens when I type in this field or move the mouse pointer over this field.
Is there a simple way to achieve this?
You can use the TITLE attribute for this. Pretty easy:
<input type="text" title="enter details here" />
I have a field that I've labeled 'password', and I'd like the browser to ask the user whether they want to store that password. How do I do this? Is there an HTML attribute to use?
For instance the HTML for the form would be:
<form action="" method="POST" name="form">
Enter password:
<input type="text" name="password" /><br />
A checkbox
<input type="checkbox" name="some_checkbox" value="Yes" /><br />
A textarea<br />
<textarea name="input_text" cols=40 rows=10></textarea><br />
<input type=submit value="Submit">
And I'd like the browser to prompt for storing the 'password' input.
You can't explicitly force the browser to show that dialog, but using the correct elements gives the browser a helping hint.
So make sure your password element has the type="password" attribute.
This should do it:
<input type="password" name="password" />
Note the proper type for the password box.