I'm using the autocorrect "off", etc. in input boxes on my site. However, Safari on Mac OS X still auto corrects text input.
This is what I have:
<input autocomplete="off" autocorrect="off" autocapitalize="off" type="text" name="url" placeholder="Enter a web address">
But when I test it on Safari version 9 (Mac OS X v10.11 (El Capitan)), it is still autocorrecting the text.
Is there a more robust answer? Is the new version of Safari overwriting it?
You need to add spellcheck="false" to your input.
<input autocomplete="off" autocorrect="off" autocapitalize="off" type="text" name="url" placeholder="Enter a web address" spellcheck="false">
Fiddle
If you have to do this with jQuery, you'll need to leave the quotes off of false.
$(this).prop("spellcheck", false); // this works
$(this).prop("spellcheck", "false"); // this does NOT properly set the property
Change input type from text to search
<input type="search">
Or
https://discussions.apple.com/thread/8325873
Related
How To Preventing Browser Text Input Suggestions from browser cookie, autocomplete="off" and others are not work.. Chrome Version : 2021 chrome version 88.0.4324.190
readonly is work for autofill its work proper, but autosuggestion is not.
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;" autocomplete="off">
<input type="password" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password">
what you want is here
change type="password" to type="text" and used in your input
-webkit-text-security: disc !important;
<input type="text" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password" style="-webkit-text-security: disc !important;">
The only thing that still works in Chrome is creating random name not related to the field. Like autocomplete="new-password" to password field name.
Seems to be wrong, but it's a workaround.
So for your field named email, try to put autocomplete="new-email".
Even as stated as working in the SO below, autocomplete="off" still buggy:
Disabling Chrome Autofill
Also note that autocomplete="no" will appear to work but autocomplete="off" will not for historical reasons. autocomplete="no" is you telling the browser that this field should be auto completed as a field called "no". If you generate unique random autocomplete names you disable auto complete.
You need to keep in mind that's a feature from the Password Manager.
This is correctly stated here by Mozilla:
Preventing autofilling with autocomplete="new-password"
And why it's not always possible to prevent:
Browser compatibility
Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
Solution #1:
As you can see, the autosuggestion show From this website.
As workaround, you need to change the fieldname from name="email" to something else, like name="user-email".
And handle the change inside your server logic.
Again in your server logic, generate a random name every time page is shown, like a UUID autocomplete="c821c4f0-7be8-11eb-9439-0242ac130002"
Solution #2:
Replace the input kind type="email" to type="text".
html:
<input type="text" class="form-control" id="user-email" name="user-email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" />
javascript:
window.onload = function () {
init();
}
function init() {
let x = document.getElementById("user-email");
if (x) x.setAttribute("type", "email");
}
Solution #3:
Add hidden fields before the real one:
HTML - Disable Password Manager
PS: Don't forget to place autocomplete="off" on the form which field belongs
I would like to make my website work identically on every browser.
Unfortunately, the validation mechanism introduced their differences.
Field of type 'e-mail' on Chrome and Opera 'trim';delete blank spaces on input of e-mail field and Firefox no cuts signs and do not accept e-mail in this form.
<input type="email" id="e-mail" class="" name="e-mail" value="" placeholder="" autocomplete="off">
Example:
If you want to get the same behavior between browsers while keeping the email verification, you can trim the field on blur:
document.getElementById("e-mail").addEventListener("blur",function(e){
this.value = this.value.trim();
});
<input type="email" id="e-mail" class="" name="e-mail" value="" placeholder="" autocomplete="off">
i am seeing some weird things with respect to IE browser..
I have html control and have some properties..I want the order of the property to be same in chrome and IE...Looks like IE is rendering this control with difference properties order.
<input name="UserName" id="UserName" type="text" value="xyz" maxlength="120" tabindex="1"/>
IE rendered textbox-
<input name="UserName" tabindex="1" id="UserName" type="text" maxlength="120" value="xyz>
Chrome is showing exactly the same order which was placed.
<input name="UserName" id="UserName" type="text" value="xyz" maxlength="120" tabindex="1">
Can anyone please let me know how to make IE control properties sequence same as it placed.
Thanks,
Roshan
Andrew Sun is right - the browser will choose its own order.
It makes no difference at all as long as all the attributes are present - you can still retrieve them with getAttribute.
Using autocomplete="off" on a password input is having this effect on the whole form not just the password field.
This wasn't the case in Safari 5.
Even adding autocomplete="on" to other fields in not working.
<form name="login" method="post" action="login.html" >
E-mail<br/>
<input name="email" type="text" ><br/>
Password<br/>
<input name="password" type="password" autocomplete="off" >
</form>
Tried replicating the same on Safari 5.1.7.
I've set form's autocomplete as "on" and didn't make any addition to the password field (not explicitly setting password field's autocomplete "off"). Password field does not show an auto-completed suggestion, while the other fields work fine and shows auto-complete suggestions.
Please let me know in case you need any more explanation.
Following up on my comment:
Have you explicitly set autocomplete="on" at the form level while disabling it for the password? (from w3schools.com: http://www.w3schools.com/tags/att_input_autocomplete.asp )
<form name="login" method="post" action="login.html" autocomplete="on">
E-mail<br/>
<input name="email" type="text" ><br/>
Password<br/>
<input name="password" type="password" autocomplete="off" >
</form>
Also confirm that it is not a browser stored username as password that is being auto-filled? (i.e. "Do you want Safari to remember these credentials?" - Not a big Safari users so not sure how it prompts / manages the credentials store.
try adding a '/' at the end of the password input tags
<input name="password" type="password" autocomplete="off"/>
Is there any obvious reason why this input box is editable?
<input id="username" name="username" class="textfield70pc" readonly="readonly" type="text" value="My username" />
It seems kind of pointless having to use javascript / jquery to disable this text box.
If you're looking for it to be grayed out, add the DISABLED attribute:
<input id="username" name="username" ... disabled="disabled" />