My signup page has two forms; when you go to the page on a mobile browser (confirmed on Android and iOS), it autofocuses on the first input element in the second form and opens the keyboard, jumping past the first form.
All I want is to stop the autofocus entirely because it skips past some pre-signup instructions. (Though it would also be good to understand why/how this happens, and why it chooses the second form to focus on!)
Neither form has the autofocus attribute set
I've tried adding an id="top" and linking to /signup#top - no difference
I have $(window).scrollTop(0) running after the page is rendered (for an unrelated reason) - no difference
I'm using Meteor / Blaze with Semantic UI
The first form is my own, the second form is the userAccounts package signup form
<div class="ui segment">
<p>Information that is skipped past</p>
<form class="ui form" id="welcomeFormEmail">
<input type="email" name="preLaunchEmail" placeholder="Your email address">
<button type="submit">Submit</button>
</form>
<div class="at-pwd-form">
<form id="at-pwd-form" action="#" method="POST" class="ui large form">
<div class="ui stacked segment">
<div class="at-input required field">
<div class="ui fluid input icon">
<input type="email" id="at-field-email" name="at-field-email" placeholder="Email" autocapitalize="none" autocorrect="off">
</div>
</div>
<!-- Various other fields -->
<!-- Various other fields -->
<!-- Various other fields -->
<input type="submit" class="at-btn ui fluid large primary button" id="at-btn" value="Register">
</div>
</form>
</div>
</div>
Any ideas why this is happening and what to do to stop it?
You can use blur
if you have just one text input you can get it using getElementById and set it to blur
document.getElementById("myAnchor").blur();
but if you have multiple text inputs this loop gets every input on your page and disable focus on all of them
var elelist = document.getElementsByTagName("input"); for(var i = 0; i < elelist.length; i++){
elelist[i].addEventListener("focus", function(){
this.blur();
}); }
Related
What is the best practice to label a part of a form?
Creating a <div tabindex="0"> does not seem to be "good" method.
I have a large form with different parts everything is on one site (no wizzard or something).
I guess users with a screen reader just use TAB to navigate between the different inputs and once they reach a different area of the form I would like to explain what it is about.
So kinda like labeling a div and once they reach an input in that div -> read something.
Just a simplified example:
<form>
<!-- some inputs about the company -->
<h2>Company</h2>
<div>
<label for="company-name-input">Company Name</label>
<input type="text" id="company-name-input">
</div>
<div>
<label for="company-address-input">Company Address</label>
<input type="text" id="company-address-input">
</div>
<h2>Contact Partners</h2>
<!-- here are inputs about important person you can contact -->
<!-- how do I notify users about this fact, when they just tab thought the form
I read it's no good to add a tabindex="0" to the headline
-->
<div>
<!-- person one -->
<label for="person-email-1">E-Mail</label>
<!--
I could make a aria-label="Here is the email of your first person"
but in case someone tabs here from below they might miss that..
and always have a "Person nr X before each input might be strange as well
-->
<input type="email" id="person-email-1">
<!-- all the other persons -->
<button>Add Partner</button>
</div>
</form>
What's the best practice to make Users aware they are editing fields for a contact partner when they focus an input in a certain area without repeading that info in every single input?
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<form>
<!-- some inputs about the company -->
<fieldset>
<legend>Company</legend>
<div>
<label for="company-name-input">Company Name</label>
<input type="text" id="company-name-input">
</div>
<div>
<label for="company-address-input">Company Address</label>
<input type="text" id="company-address-input">
</div>
</fieldset>
<fieldset>
<legend>Contact Partners</legend>
<!-- here are inputs about important person you can contact -->
<!-- how do I notify users about this fact, when they just tab thought the form
I read it's no good to add a tabindex="0" to the headline
-->
<div>
<!-- person one -->
<label for="person-email-1">E-Mail</label>
<!--
I could make a aria-label="Here is the email of your first person"
but in case someone tabs here from below they might miss that..
and always have a "Person nr X before each input might be strange as well
-->
<input type="email" id="person-email-1">
<!-- all the other persons -->
<button>Add Partner</button>
</div>
</fieldset>
</form>
I am updating a project which has been made in Angular 4. The website consists of multiple forms which include input field. When the user presses 'enter' the form is being submitted. I want to prevent this from happening. How can I do that?
Is there something that I can place within the quotationmarks which disables the submit action from happening: (keydown.enter)=""
form.component.html
<div class="d-flex justify-content-center hm-row">
<form class="hm-form" [formGroup]="crossingForm">
<div class="form-group">
<label for="dynamicThresholdTime">{{ 'CROSSING.DYNAMIC_THRESHOLD_TIME' | translate}}</label>
<input type="text" class="form-control" id="dynamicThresholdTime" placeholder="" formControlName="dynamicThresholdTime">
</div>
<...more code...>
</form>
</div>
Use this :
<form (keydown.enter)="$event.preventDefault()"></form>
You also can remove the form tag and replace it with a div. Browsers make this behavior because of the form tag.
Buttons with type="submit" have default behavior. Choose type="button" for no default.
Also had this happen with a form and input field. event.preventDefault() in my client side script solved this.
I have an <a> link which will only open if I right click it and click on "open in a new tab. If i just click it normally it just puts a "?" after the rest of the link, like this: "http://localhost:8011/login.html?".
Code:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="login">login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
If i put target="_self" it still doesn't work. The two files are definitely in the same folder.
Your HTML is invalid. It is forbidden to put a <button> inside an <a>. Use a validator.
The effect you see is due to error recovery reacting badly and your clicks being handled by different elements.
will only open if I right click it and click on "open in a new tab
This is what happens when you right click on the <a> element.
If i just click it normally it just puts a "?" after the rest of the link
This is what happens when you submit a form using a submit button (and the form has no successful controls in it, which is the case here because none of your controls have names).
If you want a link, then use a link and only a link. Get rid of the <button> element.
If you want something that looks like a button then first think about what message you are sending to the user. Buttons do things. Links go places. Giving the user a visual signal that they are doing something is likely to be wrong.
If you still want a link that looks like a button, then style it with CSS.
That said, having a link marked Login which doesn't submit the form is just confusing. You should probably:
Keep the <button>
Get rid of the <a>
Give your form controls name attributes
Make the form use method="POST"
… and then write server side code to process the data so the login form can be used to login to the site.
You can change your HTML form to be as follows so that the form is submitted when login is clicked:
<div class="form">
<form class="login-form" method="POST" action="index.html">
<!-- user inputs -->
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<!-- your submit button -->
<input type="submit" name="submit" value="login">
<!-- your other link -->
<p class="message">Not registered? Create an account</p>
</form>
</div>
This approach will be better than the current one for creating a login form.
This way you still have your button that will redirect to index.html without having to use a messy approach with <a> and <button>.
It's because you've a button, and it's trying to submit the form.
Try using bootstrap and give the <a> tag some classes, like this:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
login
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
Or just give style to your <a> by css, but if you use the button, then you're submitting the form instead clicking the link.
EDIT: you could also wrap the <a> inside the button, so the link on the <a> will execute first instead of submitting the form
<button class="login">login</button>
When I Press Login button one popup is shown.
In that popup I need default autofocus on Login Input field. Can I achieve that with HTML5/CSS only?
jsfiddle
<div class="main">
<div class="panel"> Log In
</div>
</div>
<!-- popup form #1 -->
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" autofocus />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" /> <a class="close" href="#close"></a>
</div>
autofocus is defined to work reliably only on page load. It is not really suited for situations where you are swapping, or opening, or unhiding DOM elements such as in a single-page application framework. You are likely to have to resort to handling the autofocusing yourself.
The Answer is not really effectively (with certainty).
I would suggest Javascript, as UnskilledFreak mentioned, on every click the focus is set
...
Log In
...
<!-- not javascript library needed -->
<!-- tested on Win7 and Chrome 37+ -->
Here is your fiddle updated: http://jsfiddle.net/6f9ge64f/2/
You should probably also check key-input for people that don't use a mouse.
Update:
it's a bit hacky, but you could try
...
Log In
...
<input type="text" id="login" value="" autofocus />
...
<a class="close" href="PATH-TO-FILE?c=2#close"></a>
...
<!-- tested with on Win7 and Chrome 37+ -->
where the PATH-TO-FILE is for example http://www.test.com/default.html (absolute or relative), and the ?c=1 and ?c=2 is any parameter, just to provoke a reload. like this you could use autofocus.
THIS WONT WORK IN JSFIDDLE since the HTML is embedded, but it works in the "real-world".
Update 2:
...
Log In
<!-- tested with on Win7 and Chrome 37+ -->
...
Here is the fiddle http://jsfiddle.net/6f9ge64f/6/
If you are using jQuery do something like this:
$( "#login-button" ).click(function() {
$( "#input" ).focus();
});
Autofocus attribute moves the focus to the specified input on page load. In this case #input is present in DOM but hidden; on clicking login button, the focus is removed.
Should probably use .focus() on the login click event handler
<input type="text" id="login" value="" />
<input type="text" id="login" value="" autofocus />
<input type="text" id="login" value="" />
http://jsfiddle.net/6f9ge64f/4/
autofocus works only on standard pageload, If you are using javascript/angular/react/jquery to modify elements after page load the active element changes, and autofocus wont work.
What I do is I wait for all the dom elements to load and process then set the active element
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#input-field").focus();
}, 1500);
});
</script>
I have a user registration form with a submit button and a cancel button,
Problem 1) I can't have those two buttons inside the single form, if I have the cancel button inside the form with submit button, when I click the cancel button, it execute the action of the form instead of going to home and cancelling the registration page.
Can't we have these two buttons inside a single form..?
Problem 2) Because of Problem 1, I added the cancel button outside the form and linking to the home page, it works as I expect, but, I need to have those two button in the same row on the screen.
<div id="main-content">
<div id="login-container">
<form id="user-registration-form" method="POST">
// Some other fields, like username, etc.
<fieldset class="edit" id="submit-button-fieldset">
<input type="submit" id="submit-regiser"/>
</fieldset>
</form>
<fieldset id="Cancel-field">
<button id='cancel-registration' onclick=window.location.href='link-to-home'>Cancel</button>
</fieldset>
</div>
</div>
I need to have those #submit-regiser and #cancel-registration in the same row in the screen. And this is for mobile browser, so should obey XHTML rules
Thanks in advanced.
That's the intended behavior. Cancel buttons are supposed to clear the form, not to take one back to what page ever.
Still you can do it this way using the <button> element:
<form id="user-registration-form" method="POST">
<fieldset class="edit" id="submit-button-fieldset">
<button type="submit" id="submit-regiser">submit</button>
<button id="cancel-regiser" onClick="window.location.href='http://example.com'; return false;">Back</button>
</fieldset>
</form>