從JavaScript手動觸發iPhone / iPad / iPod鍵盤

Question

我正在使用簡單的DIV開發HTML代碼編輯器並捕獲事件。 當我在iPad上使用它時，鍵盤永遠不會彈出，因為我在技術上不是一個可編輯的領域。

有沒有辦法以編程方式告訴iPad我需要鍵盤？

Answer 1

如果您的代碼是通過用戶操作啟動的內容執行的，那么它將起作用。

例如;

這工作（彈出鍵盤）：

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

這不起作用（輸入獲取邊框但沒有鍵盤彈出）：

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

Answer 2

在contentEditable div上放置一個透明的textarea。 一旦用戶聚焦textarea，鍵盤就會打開。

在textarea上為focus事件注冊event listener ，並將textarea的visibility設置為hidden 。 這可以防止閃爍的光標。

在blur事件發生后，將textarea的visibility設置回visible 。

在contentEditable div中處理它們時，以相同的方式為keydown ， keyup ， keypress事件和處理這些事件注冊其他事件監聽器。

Answer 3

要在iOS設備上顯示鍵盤，您需要關注可編輯元素，例如input或textarea 。 此外，元素必須是可見的，並且必須執行.focus()函數以響應用戶交互，例如鼠標單擊。

問題是 - 我們不希望輸入元素可見。我已經擺弄了這個安靜的時間，最終得到了我想要的結果。

首先，創建一個要用於顯示鍵盤的元素 - 在本例中為一個按鈕和一個隱藏的輸入元素:( 在移動設備上運行 jsFiddle或Test ）

<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. 您可以在輸入中使用一些CSS，例如將opacity ， height和width為0 。 但是，如果您的輸入完全隱藏，則無法再次使用，因此請確保保留padding或border ，以便渲染某些內容（即使由於不透明度而無法顯示）。 這也意味着你不應該使用display:none隱藏它，不允許隱藏元素被聚焦。
3. 使用隱藏輸入上的常規鍵盤事件（ keydown ， keypress ， keyup ）來訪問用戶的交互，就像通常那樣。 這里沒什么特別的。

Answer 4

我發現調用prompt("Enter some value")會觸發iPad上的鍵盤2.不確定這是否對您的情況有幫助。

Answer 5

這些問題的答案表明，這是不可能的： 為什么@contenteditable不能在iPhone上運行？

我的一位正在開展類似項目的同事最終使用textarea作為他的編輯器的iPad版本，以及支持contenteditable的瀏覽器的contenteditable divs / span。 也許類似的東西對你有用。

Answer 6

代理輸入技巧

我想出了另一個骯臟的解決方法，但效果很好。 訣竅是基於以下事實：如果鍵盤已經打開，更改焦點將不會關閉鍵盤。

1. 在頁面左上角添加一個小的“代理不可見輸入”，位置固定（固定位置可防止閃爍，同時確保字段大小超過16px以防止iOS頁面縮放焦點）
2. 單擊按鈕時，只需.focus()在此不可見字段上。 鍵盤會打開......
3. 顯示或呈現您的其他輸入字段
4. 現在用鍵盤打開所需輸入的.focus() 。 您可以使用較小的setTimeout延遲，例如500ms（如果需要）

Answer 7

這是一個適合您的解決方案：

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

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