I'm trying to resolve a Chrome autocomplete aggravation with my small web based work order form. I have tried to use autocomplete="off" in my html code, it doesn't work. When I 'Inspect' my page code in Chrome it always displays autocomplete="on" with autocomplete="off" or other wrong terms for off.
But this user's autocomplete="off" demo works perfectly for me. What am I missing?
My code:
<input name="contact_first" style="border:1px solid #737373"
class="required" id="contact_first" value="<?php echo
$row_contact['contact_first']; ?>" autocomplete="off" size="25" />
Example working code:
<label for="firstName2">First Name (WITH autocomplete):</label>
<input id="firstName2" name="firstName2" autocomplete="off">
I have actually cut and pasted the jsfiddle example code from the working example to a small test web form of mine, autocomplete does not stop.
This may affect other browsers also, but I use Chrome primarily.
Any advice appreciated.
Try to use autocomplete="new-password" to disable the Chrome auto-fill functionality (different from basic autocomplete).
Related
this is a test code :
<form method="post" action="somepage.php">
<input type="text" name="test_input" required />
<textarea name="test_textarea" required></textarea>
<input type="submit" />
</form>
It works well in firefox, but not in chrome / edge. Hovering the let a message appears (the field is required), but not with the textarea.
thanks a lot!
The main purpose of required attribute is to run a validation when submitting, which works fine in both browsers.
Chrome not showing the tooltip for <textarea> is a known bug.
I have tried both autocomplete="off" and autocomplete="false" in HTML5 form but It's not working in chrome version (73.0.3683.103).
Disable HTML Form Input Autocomplete and Autofill
Add autocomplete="off" onto <form> element;
Add hidden <input> with autocomplete="false" as a first children element of the form.
<form autocomplete="off" method="post" action="">
<input autocomplete="false" name="hidden" type="text" style="display:none;">
...
This formation is going to prevent Chrome and Firefox to offer autofill and autocomplete for all input fields inside the form. (as discussed here)
Although it is known that some browsers ignore this; there's a full discussion in the link attached to this thread of possible fixes.
Now works for me in Chrome 72.0.3626.121 having never worked
previously.
I had been using <input type="text" id="something" pattern="[ \S]+" role="presentation" autocomplete="nope"> but that now doesn't work.
You can read more about autocomplete on MDN.
You can also opt to use some sort of library if relevant.
There doesn't seem to be one working solution from the investigation above though.
Read more about this on stackoverflow.
I am trying to get autocomplete on a creditcard form to work properly in Safari, however it seems to completely ignore the autocompletion for expiration date. Whether I use cc-exp or separate cc-exp-month/cc-exp-year, neither is working. The autocomplete for cc-name and cc-number are working properly though, as are things working properly in Chrome.
I have been able to bring the issue down to a very simple example:
<form>
<input type="text" autocomplete="cc-name" placeholder="name" />
<input type="text" autocomplete="cc-number" placeholder="number" />
<input type="text" autocomplete="cc-exp" placeholder="expiration" />
<input type="text" autocomplete="cc-csc" placeholder="cvc" />
</form>
What am I missing here? I already tried the older syntax using ID's, names and x-autocompletetype. Neither with any success. Tested on Safari 7 till 10, so this issue seems to be around for a while, or I am really missing something obvious?
(note: to test the example above, make sure you are visiting this page over https, else it would not work anyway)
I was just looking for a solution to this and noticed that on an older form, where I don't even have the autocomplete attribute, it works. The difference between the forms is that on the older form I am using 2 drop-down fields (SELECT tags) for expiry month and year in MM and YYYY formats.
After playing with different options, I concluded that Safari wants 2 separate fields, one for MM and one for YYYY. I now have 2 text fields like this:
<input type="text" name="CCExpiryMonth" id="CCExpiryMonth" value="" placeholder="MM" autocomplete="cc-exp">
<input type="text" name="CCExpiryYear" id="CCExpiryYear" value="" placeholder="YYYY" autocomplete="cc-exp">
This works in Safari.
I have a submit form in my website which works well with Firefox but does not work on Chrome and Safari. The input textbox is the only element giving trouble, all the other elements work fine with every browser. Do someone have a solution for this?
Here is the code of the textbox:
<div class="form-input-half-left form-input-border">
<div class="form-input-background opacity_2"></div>
<input id="name" type="text" name="x_first_name" value="name *" onclick="this.value = '';"/>
<span class="error"> <?php echo $x_first_nameErr;?></span>
</div>
i tried your code here in jsfiddle and works fine in both chrome and firefox.i couldn't replicate the error, but i think you can use placeholder for your purpose and it works much more better than onclick
<input id="name" type="text" name="x_first_name" placeholder="name *"/>
may i know the problem is on which version of chrome and what is the problem exactly? it doesn't clear the text box or something else?
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).