I have a problem with the navigation arrows on Safari on the iphone when filling in a web form.
When the form inputs initially display off the bottom of the screen when you click on the top input the arrows don't seem to work as I would expect. The arrows only navigate through the visible fields. I'm not sure if this is the expected behaviour.
The buttons I'm talking about are shown below.
This is a sample html form that shows the problem on an iPhone 7 with iOS 14.7.1.
I've added some minimal styling to show the problem.
If you select the top input while the other inputs are off the bottom of the screen you can't navigate down the form using the arrow. If you scroll down first and then select one of the inputs depending on which input and where you scroll to you can sometimes navigate through the whole form.
Is there any way to get the arrows to navigate consistently through the form as it is currently displayed or is this just an iPhone "feature"? My real form is more complex than this so ideally I'd like a more generic solution - I have been able to navigate through simpler forms.
<body>
<h1 style="margin: 200px 20px 200px 20px;">Heading</h1>
<form style="display:flex; flex-direction:column;">
<label for="b3-InputAgreementnumber">Agreement number</label>
<input required="" type="text"
autocomplete="off" returnkeytype="next"
keyboardtype="number-pad" id="b3-InputAgreementnumber" >
<label for="b3-InputEmail">Email</label>
<input required="" type="email"
maxlength="60" autocomplete="new-password" returnkeytype="next"
id="b3-InputEmail" >
<label for="b3-InputConfirmationEmail">Confirm Email</label>
<input required="" type="email"
maxlength="60" autocomplete="new-password" returnkeytype="next"
id="b3-InputConfirmationEmail">
<label for="b3-InputSurname">Surname</label>
<input required="" type="text"
maxlength="30" autocomplete="off" returnkeytype="next"
id="b3-InputSurname" >
<label for="b3-InputDateofbirth">Date of birth</label>
<input required="" type="text" placeholder="DD/MM/YYYY" autocomplete="off"
returnkeytype="next" id="b3-InputDateofbirth">
<label for="b3-InputPostcode">Enter your postcode</label>
<input required=""
type="text" maxlength="10" autocomplete="new-password"
returnkeytype="next" id="b3-InputPostcode">
<div>
<button type="submit">Continue</button>
<button type="button">Cancel</button>
</div>
</form>
</body>
I've not been able to find a solution to this as yet but for now we've decided to disable the arrow keys on this form using a technique based on this question's answer IOS disable the keyboard tab arrows.
For iPhone we set all the input fields to readonly and then on focus we set the focused input to read/write using javascript.
It's not an answer but is a reasonable workaround for my use case.
Related
Everytime I select the ngui-auto-complete scrollbar on the dropdown component, the dropdown disappears.
Would it be a better idea to add my scrollbar to another element rather than ngui-auto-complete?
Working example: STACKBLITZ
dropdown.component.html
<form [formGroup]="myForm" class="form-style">
<input
id="input-dropdown"
[list-formatter]="autocompleListFormatter"
type="text"
class="form-control"
minlength="3"
maxlength="20"
ngui-auto-complete
formControlName="gridDropdown"
[source]="dropdownData"
value-property-name="id"
display-property-name="name"
placeholder=" Search"
[(ngModel)]="value"
#agInput
/>
</form>
Source_code
You should add [close-on-focusout]="false" on your input element.
https://www.npmjs.com/package/#ngui/auto-complete
It should look like this.
<form [formGroup]="myForm" id="input-dropdown" class="form-style">
<!-- appAutoFocus - add this to input to use custom auto-focus directive-->
<input id="input-dropdown" [list-formatter]="autocompleListFormatter" type="text" class="form-control"
minlength="3" maxlength="20" ngui-auto-complete formControlName="gridDropdown" [source]="dropdownData" [close-on-focusout]="false"
value-property-name="id" display-property-name="name" placeholder=" Search" [(ngModel)]="value" #agInput />
</form>
If you can rely on others do implement basic functionality for you, Material Design components for Angular might be something helpful. It has also an autocomplete dropdown component https://material.angular.io/components/autocomplete/overview
I have not tested that with large scrollbars, bar I found Infinite scroll for autocomplete in Angular Material 6 which looks promising, i.e. that scrollbars seem to work as they should.
I am building a Bootstrap form and the email and password form elements show with pre-populated data from some other or some earlier form login on a different site. The Chrome browser is auto-populating the form elements.
Is there an HTML attribute of method in Bootstrap to force these form elements to null or empty on page load?
2015-10-29 -- here's the markup:
<form autocomplete="off" method="post" role="form">
<div class="form-group">
<input name="formSubmitted" type="hidden" value="1">
</div>
<div class="form-group">
<label for="username">Username</label>
<input autocomplete="off" autofocus="autofocus" class="form-control" id="username" name="username" required type="text">
</div>
<div class="form-group">
<label for="password">Password</label>
<input autocomplete="off" class="form-control" id="password" name="password" required type="password">
</div>
<button class="btn btn-default" type="submit">Login</button>
</form>
Use autocomplete="new-password"
Works a charm!
Use the autocomplete="off" attribute on the <form> or <input>.
from MDN:
autocomplete
This attribute indicates whether the value of the control can be
automatically completed by the browser.
off The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method;
the browser does not automatically complete the entry.
on The browser is allowed to automatically complete the value based on values that the user has entered during previous uses...
Also from MDN, see: How to Turn Off Form Autocompletion
Also see:
Chrome Browser Ignoring AutoComplete=Off
"AutoComplete=Off" not working on Google Chrome Browser
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
If on address bar, you type stackoverflow.com the browser (atleast google chrome does) displays the following message
Press Tab to search Stack Overflow
How can I manage to do that in my site? Any help is much appreciated...
use "tabindex" for the input fields. you can set the tab order too
For example:
<input name="name1" type="text" tabindex="1" />
<input name="name2" type="text" tabindex="3" />
<input name="name3" type="text" tabindex="2" />
so if you press tab button, the order will be like --> name1-->name3-->name2
I've had this weird situation just popup where I'm unable to use my mouse on a form I'm creating. It's requiring me to tab through the text fields. if I click on the second field it just pushes me back to the first field, i have to tab!
this is the form totally simple, it has something to do with the labels but I have never had issues before.
BTW: no JS or CSS in this form or page
my example:
<form>
<label for="username"*Username label>
<input type="text" name="username" tabindex="1" id="username">
<label for="password"*Password*label*>
<input type="password" name="password" tabindex="2" id="password">
<input type="submit" class="button" value="Login" name="submit" >
</form>
This is the proper way to format inputs with labels. This should fix your problem.
<label for="username">*Username*<input type="text" name="username" tabindex="1" id="username"/></label>
<label for="password">*Password*<input type="password" name="password" tabindex="2" id="password"/></label>
demo: http://jsfiddle.net/ZFZgt/
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.