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!)
autofocus
attribute setid="top"
and linking to /signup#top
- no difference$(window).scrollTop(0)
running after the page is rendered (for an unrelated reason) - no difference<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();
}); }