htmlformsmeteorautofocusmeteor-useraccounts

HTML5 - unwanted <form> autofocus on mobile browsers


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!)

<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?


Solution

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