I'm using Google Autocomplete address API (here the link)
I'm using angular2 and this is the code
HTML
<form autocomplete="off" method="post">
<input autocomplete="false" name="address" type="text" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="shippingAddress">Address*</label>
<input id="shippingAddress" name="address" type="text" autocorrect="off" [(ngModel)]="shipping.Address1" (blur)="checkIndirizzo()" autocapitalize="off" spellcheck="off" class="form-control" #search [formControl]="searchControl">
</div>
</div>
</div>
</form>
I tryied also this
<input autocomplete="false" name="address" type="text" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="shippingAddress">Address*</label>
<input id="shippingAddress" name="address" autocomplete="off" type="text" autocorrect="off" [(ngModel)]="shipping.Address1" (blur)="checkIndirizzo()" autocapitalize="off" spellcheck="off" class="form-control" #search [formControl]="searchControl">
</div>
</div>
</div>
The google autocomplete works perfectly, but the browser autofill covers the dropdown of google maps autocomplete. All I wanna do is to disable the browser autocomplete on this text input but I'm becoming crazy.
I read some solutions but no one works.
The only solution that worked is to set the input of type password and set
autocomplete="new-password"
but the problem is that I see dots when I write in the textbox and this is not good.
I tryied also with the hidden input field but nothing to do.
I'm using Chrome v 63.0.3239.84
Any help?
Chrome analyzes the text before the input and will trigger its autofill UI based on the words. I've found that putting the label after the input fixes the issue. I keep an empty label above to keep the space and then set position: absolute; on the label after
I've included a sample below
https://codepen.io/anthonyholmes/pen/YYvXEa
Related
When using several forms control together with "fieldset" tag the line around them doesn't appear. I have tried it in Firefox, Chrome, Explorer and Safari and the same thing happens in all of them. This is the code I am using for it:
<form name="form" id="form" method="get">
<fieldset>
<legend>Contact details:</legend><br>
<label for="name">Name:</label>
<input type="text" name="nom" id="name"><br><br>
<label for="surname">Surname:</label>
<input type="text" name="ape" id="surname"><br><br>
<label for="age">Age:</label>
<input type="number" name="ed" id="age" min="1" max="95"><br><br>
<label for="email">Email:</label>
<input type="email" name="em" id="email"><br><br>
<input type="submit">
</fieldset>
</form>
Are you using bootstrap? i have tried to comment out bootstrap link from my file and the fieldset border appear.
If you included Bootstrap you might need some additional customization.
I tried this in my code but the required function doesn't seem to work in my web page :
<div>
<label for="Username">Username: </label>
<input type="text" name="username" required>
</div>
For the "required" attribute to work, the <input> must be be wrapped in <form> ... </form> tags.
If the input box is located within a <form> tag as intended, then required will work correctly in all modern browsers. Demo:
<form>
<div>
<label for="Username">Username: </label>
<input type="text" name="username" id="Username" required>
</div>
<input type="submit" value="click to test"/>
</form>
Also for= on a label requires the target element to have an id with matching text before it's effective. It doesn't interact with the name attribute. I've added an id in the demo.
I have a web app with a form that allows a user to enter contact information for several of their friends. When a user attempts to use the "AutoFill Contact" option that pops up when one of the form fields has focus, the info from the selected contact is used in all fields on the page instead of limiting the autofill to just the group of fields that has focus at the time.
I've looked through the documentation I could find on the autofill feature, and it looks like applying an autocomplete value of "section-*" for each field grouping should be enough. I'm guessing what I'm trying to do simply isn't possible, but input from someone well-versed in autofill settings would be much appreciated!
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form>
<fieldset class="container">
<div class="row">
<h2>First Friend</h2>
</div>
<div class="row">
<div>
<label for="SendRequestTo1FirstName">First Name</label>
<input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1" />
</div>
<div>
<label for="SendRequestTo1LastName">Last Name</label>
<input type="text" id="SendRequestTo1LastName" name="SendRequestTo1LastName" maxlength="50" autocomplete="section-friend1" />
</div>
<div>
<label for="SendRequestTo1Phone">Phone Number</label>
<input type="tel" placeholder="(111) 222-3333" id="SendRequestTo1Phone" maxlength="20" autocomplete="section-friend1" />
</div>
</div>
</fieldset>
<hr>
<fieldset class="container">
<div class="row">
<h2>Second Friend</h2>
</div>
<div class="row">
<div>
<label for="SendRequestTo2FirstName">First Name</label>
<input type="text" id="SendRequestTo2FirstName" name="SendRequestTo2FirstName" maxlength="50" autocomplete="section-friend2" />
</div>
<div>
<label for="SendRequestTo2LastName">Last Name</label>
<input type="text" id="SendRequestTo2LastName" name="SendRequestTo2LastName" maxlength="50" autocomplete="section-friend2" />
</div>
<div>
<label for="SendRequestTo2Phone">Phone Number</label>
<input type="tel" placeholder="(111) 222-3333" id="SendRequestTo2Phone" maxlength="20" autocomplete="section-friend2" />
</div>
</div>
</fieldset>
</form>
It looks like you have part of how section-* works, you just need to include a token after your section identification.
For example section-friend1 given-name:
<label for="SendRequestTo1FirstName">First Name</label>
<input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1 given-name" />
Here is an example from the spec, with some examples and the available tokens. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
Update:
Safari Caveats
Safari is really terrible with autocomplete. There isn't any documentation around what it is looking for, and doesn't seem to use any of the autocomplete standards. It seems to use a mix of id attributes and name attributes, or looks at the <label> content for the input.
Here are the best resources I found around getting both desktop and iOS Safari to work:
Blog:
https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
Codepen:
https://codepen.io/grigs/pen/YqoyWv
Credit Card autofill:
https is required in order for autocomplete to work for credit cards. Self-signed certificates do not work for Safari iOS (includes ChromeiOS), but work on desktop.
Hope this helps!
I have a problem with my website and I don't get it why it doesn't work.
I have two separate domains with the same WordPress theme (http://takoplius.lt and http://takoplius.ru). The interesting thing when I load pages on Chrome browser .lt version contact form inputs are not working, but in .ru version, everything works just fine with contact form and I can type text in inputs. When I try to load the .lt page in Firefox, contact form works just fine there.
Here is my form code:
<form method="post" id="kontaktu_forma" onsubmit="send_email('<?=$lang;?>'); return false;">
<label><?=$vardas_pavarde;?>: </label>
<input class="input" type="text" name="vardas" />
<label><?=$imones_pavadinimas;?>: </label>
<input class="input" type="text" name="imone" />
<label><?=$adresas_aa;?>: </label>
<input class="input" type="text" name="adresas" />
<label><?=$telefono_nr;?>: </label>
<input class="input" type="text" name="phone" />
<label><?=$el_pastas;?>: </label>
<input class="input" type="text" name="email" />
<label><?=$dominancios_paslaugos;?>:</label>
<textarea class="input" rows="5" name="klausimas"></textarea>
<input type="button" class="button" value="<?=$siusti;?>" onclick="send_email('<?=$lang;?>'); return false;" style="margin-left: 15px;" />
</form>
It would be great if someone helps me with this issue.
Thanks!
you have to change this
jQuery(function($) {
$('body').disableTextSelect();
});
To
jQuery(function($) {
$('#main').disableTextSelect();
});
not only your input selection is disables but you cant select any text from that website
because your are disabling text selection from js, I found below code in your website, you remove this code and it will fix your problem
jQuery(function($) {
$('body').disableTextSelect();
});
just remove or comment out above code.
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.