web-dev-qa-db-ja.com

JavaScriptからiPhone / iPad / iPodキーボードを手動でトリガーする

シンプルなDIVを使用してイベントをキャプチャするHTMLコードエディタを開発しています。 iPadでこれを使用すると、技術的に編集可能なフィールドにいないため、キーボードがポップアップしません。

キーボードが必要であることをプログラムでiPadに伝える方法はありますか？

javascriptiphonehtmlipadkeyboard
29
Joe Bienkowski

ユーザーアクションを介して開始されたものを介してコードが実行された場合、そのコードは機能します。

例えば;

これは機能します（キーボードをポップします）：

<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div>

これは機能しません（入力にはボーダーがありますが、キーボードポップはありません）。

<input type='text' id='foo'>
<script>
  window.onload = function() {
    $("#foo").focus();
  }
</script>
15
Howard

ContentEditable divの上に透明なテキスト領域を配置します。ユーザーがテキストエリアにフォーカスするとすぐにキーボードが開きます。

focusイベントのテキスト領域にevent listenerを登録し、テキスト領域のvisibilityをhiddenに設定します。これにより、カーソルの点滅が防止されます。

visibilityイベントが発生した後、textareaのvisibleをblurに戻します。

keydown、keyup、keypresseventsの追加のイベントリスナーを登録し、これらのイベントをcontentEditable divで処理するのと同じ方法で処理します。

6
Tony Findeisen

IOSデバイスでキーボードを表示するには、inputやtextareaなどの編集可能な要素に焦点を合わせる必要があります。さらに、要素はvisibleである必要があり、.focus()関数は、マウスクリックなどのユーザー操作に応答して実行される必要があります。

問題は、入力要素が表示されないようにすることです。しばらくの間、これをいじっていて、最終的には探していた結果が得られました。

最初に、キーボードの表示に使用する要素を作成します。この場合はボタンと、非表示の入力要素です（（ Working jsFiddle or Test on a mobile device ））。

<button id="openKeyboard">Open Keyboard</button>
<input id="hiddenInput" style="visibility: hidden;">

次に、次のJavaScriptを使用します。

document.getElementById('openKeyboard').addEventListener('click', function(){
    var inputElement = document.getElementById('hiddenInput');
    inputElement.style.visibility = 'visible'; // unhide the input
    inputElement.focus(); // focus on it so keyboard pops
    inputElement.style.visibility = 'hidden'; // hide it again
});

ノート：

  1. IOSサファリが入力の領域に自動的にスクロールしてズームするので、適切なviewportを使用し、入力要素を関連する場所に配置していることを確認しましたロケーション。
  2. opacity、height、widthを0に設定するなど、入力にCSSを使用できます。ただし、入力が完全に非表示の場合、これは再び機能しません。そのため、レンダリングするものがあるので、paddingまたはborderを残してください（表示されない場合でも）不透明度のため）。これはまた、display:noneを使用して非表示にするべきではないことを意味します。非表示の要素にフォーカスすることはできません。
  3. 非表示の入力で通常のキーボードイベント（keydown、keypress、keyup）を使用して、通常どおりにユーザーの操作にアクセスします。ここで特別なことはありません。
3
Yotam Omer

Prompt("Enter some value")を呼び出すと、iPad 2のキーボードがトリガーされることがわかりました。これが状況に役立つかどうかはわかりません。

2
TimDog

プロキシ入力トリック

私は別の汚い回避策を見つけましたが、うまくいきます。トリックは、キーボードが既に開いている場合、フォーカスを変更してもキーボードが閉じないという事実に基づいています。

  1. 位置が固定されたページの左上に小さな「プロキシ非表示入力」を追加します（固定位置はちらつきを防ぎます。また、フォーカスがiOSページのズームを防ぐために、フィールドのフォントサイズが16pxよりも大きいことを確認してください）
  2. ボタンをクリックすると、この非表示のフィールドで.focus()を実行します。キーボードが開きます...
  3. 他の入力フィールドを表示またはレンダリングする
  4. 次に、キーボードを開いて、目的の入力に対して.focus()を開きます。必要に応じて、500msなど、小さなsetTimeout遅延を使用できます。
1
Maciej Sawicki

この質問への答えは、それが不可能であることを示唆しています： @ contenteditableがiPhoneで機能しないのはなぜですか？

同様のプロジェクトに携わっていた私の同僚は、iPadバージョンのエディターにはtextareaを使用し、contenteditableをサポートするブラウザーにはcontenteditable div/spansを使用していました。おそらく、似たようなものがうまくいくでしょう。

1
Greg

ここにあなたのための解決策があります：

<input id="my-input" type="text" />

<script type="text/javascript">
    var textbox = document.getElementById('my-input');
    textbox.select();
</script>
0
Villi Katrih