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

Question

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

私はkeybaordが必要であることをプログラムで教える方法はありますか？

Answer 1

この質問への答えは、それが不可能なことを示唆している。同様のプロジェクトに取り組んでいた私の同僚は、彼のエディタのiPad版のためのテキストエリアを使用して終了Why doesn't @contenteditable work on the iPhone?

、とのcontentEditableのdiv /ためにまたがりますcontenteditableをサポートするブラウザおそらく、似たようなものがあなたのために働くでしょう。

Answer 2

prompt("Enter some value")を呼び出すと、自分のiPad 2でキーボードがトリガーされることがわかりました。この状況があなたの状況に役立つかどうかわからない。

Answer 3

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

など。

この作品（キーボードをポップ）：

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

、これは動作しません（入力は国境が、ノーキーボードポップを取得します）：

​​

Answer 4

はここにあなたのためのソリューションです：

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

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

Answer 5

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

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

blurイベントの発生後、テキストエリアのvisibilityをvisibleに戻します。

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

Answer 6

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

事は - 私たちは入力要素が見えるようにしたくありません。 私はこれをある程度静かにしてしまい、最終的に私が探していた結果を得ました。

まず、あなたがキーボードを表示するために使用する要素を作成する - この場合はボタン、および非表示の入力要素を：（Working jsFiddleまたは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のSafariます自動的にスクロールして入力領域にズームするので、適切なビューポートを使用し、入力要素を適切な場所に配置してください。
2. opacity,height、width〜0のように、入力にCSSを使用することができます。しかし、入力が完全に隠れている場合は、これは再び機能しませんので、paddingまたはborderのままにしておきます（不透明で表示されなくても）。これはまた、それを非表示にするためにdisplay:noneを使用すべきではないことを意味し、隠された要素は焦点を合わせることができません。
3. 通常のキーボード操作（​​,keypress、keyup）を非表示の入力に使用すると、通常と同じようにユーザーの操作にアクセスできます。ここに特別なものはありません。