HTML5 - 望ましくない<form>モバイルブラウザのオートフォーカス

Question

サインアップページには2つのフォームがあります。モバイルブラウザ（AndroidとiOSで確認済み）のページに移動すると、第2のフォームの最初の入力要素にオートフォーカスし、キーボードを開き、最初のフォームを飛び越します。

私が望むのは、いくつかの事前サインアップの指示をスキップするので、完全にオートフォーカスを止めることです。どちらの形式はautofocus属性が、私は「

を設定してい（また、これがなぜ起こるか/どのようにを理解することが良いでしょう、そしてなぜそれが集中する二フォームを選択しますけど！）

• ページが（無関係な理由で）レンダリングされた後に実行しているに違い
• I持って$(window).scrollTop(0) - - 私は流星を使用している違いはありません
• をid="top"を追加し/signup#topにリンクしていないしようとしたVEの/セマンティック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

あなたがちょうど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(); 
    }); }