HTML5 - unwanted autofocus on mobile browsers

Question

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?

Answer 1

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();
    }); }