iOSウェブアプリ：入力テキストフィールドでオートフォーカスを無効にする

Question

iOSウェブアプリの簡単な質問があります。

入力テキストフィールドを作成すると、ユーザーはテキストフィールドをクリックし、モバイルサファリは入力フィールドにオートフォーカスし、ユーザーがクリックした入力フィールドを画面の中央に自動的に移動します。ビジュアルキーボードは、キャンバスを上または左に押すか、入力フィールドを中央に置くことができるスペースを押します。

入力フィールドのオートフォーカスを無効にして、ユーザーが入力フィールドをクリックしたり、キャンバスが動かずに動かないようにしたり、キャンバスを画面上に固定したり、ビジュアルキーボードが入力フィールドと重なり合う可能性があります（JavaScriptまたはCSSで実現しようとしています）

Answer 1

固定サイズのwebapp（iPad用に構築されたもの）がブラウザによって部分的にスクロールされる前にこの問題が発生しました。テキストフィールドをビューの中央に配置します。

フォームの親要素の1つに 'position:fixed'を設定すると、これを防ぐことができます。 'position:absolute'は移動を許可します。レイアウトによっては、フォームを「position:fixed」に設定すると役立ちます。

position: fixed; 

---

編集：固定サイズのiOS Webアプリケーションのフォームを処理するためのもう一つの関連の事：テキストフィールドがアクティブな場合、ユーザは自分の指をドラッグする場合、全体の固定を移動することが可能です（基本的に、スクロール可能ではないUIをスクロールします）。そのことがわかった場合は、フォームにtouchmoveイベントハンドラを追加して、デフォルトのアクションを防ぐことができます。

//jQuery: 
$('#myForm').bind('touchmove', function(ev) { ev.preventDefault(); }); 
// Or not: 
document.getElementById('myForm').addEventListener(
    "touchmove", 
    function(ev) { 
     ev.preventDefault(); 
    }, 
    false 
); 

Answer 2

最も簡単な方法は、ページ上部の任意のdivに "tabindex = 0"を設定することです。