HTML5 - 在移动浏览器上不需要 <form> 自动对焦

Question

我的注册页面有两种形式；当您在移动浏览器上访问该页面时（在 Android 和 iOS 上确认），它会自动聚焦在 second 表单中的第一个输入元素上并打开键盘，跳过第一个表格。

我只想完全停止自动对焦，因为它会跳过一些预注册说明。（尽管理解 why/how会出现这种情况，为什么会选择第二种形式来重点关注！）

两种形式都没有设置 autofocus 属性
我试过添加 id="top" 并链接到 /signup#top - 没有区别
我在页面呈现后 $(window).scrollTop(0) 运行（出于不相关的原因）- 没有区别
我正在使用带有语义的 Meteor/Blaze UI
第一个表格是我自己的，第二个表格是userAccounts包注册表

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

知道为什么会发生这种情况以及如何阻止它吗？

Answer 1

你可以使用模糊

如果您只有一个文本输入，您可以使用 getElementById 获取它并将其设置为模糊

 document.getElementById("myAnchor").blur();

但如果您有多个文本输入，此循环会获取您页面上的每个输入并禁用对所有输入的关注

var elelist = document.getElementsByTagName("input"); for(var i = 0; i < elelist.length; i++){
    elelist[i].addEventListener("focus", function(){
        this.blur();
    }); }

HTML5 - 在移动浏览器上不需要 <form> 自动对焦

HTML5 - unwanted <form> autofocus on mobile browsers

html

forms

meteor

autofocus

meteor-useraccounts