javascript - 在非文本元素上触发 Web 应用程序中的 iOS 键盘

Question

我有一个 Web 应用程序使用 not contentEditable 的 div。相反，当 div 获得焦点时，我自己处理按键并插入/删除/更新 innerHTML，本质上模拟一个 contentEditable div。

我不在乎它是否一定要使用 javascript，但我需要一种从网络应用程序触发 iOS 键盘的方法。

我试过在 div 上 float 一个不可见的文本区域，当它聚焦时，我隐藏文本区域并将焦点对准 div。这行得通，但是一旦非 contentEditable div 成为焦点，键盘就会消失。请注意，此技巧在 iOS 5 之前有效。

必须在网络应用中用户交互后触发 iOS 键盘，即使我们不在文本元素上也是如此。有什么想法吗？

Answer 1

对于 WebApp，我也需要键盘。我希望它能在 iOS 上运行，因此我创建了一个小的解决方法。

WebApp 本身使用键监听器来捕获按下的键(例如用于删除元素的退格键)。

我创建了一个高度、宽度和不透明度为零的文本字段。不要使用 display:none; 或 visibility:hidden;。这会导致 iOS 的 Safari 无法聚焦文本字段。

function popKeyboard() {
    document.getElementById("dummyText").focus();
}

<input type="text" id="dummyText" style="width:0px; height:0px; opacity:none;" />
<input type="button" value="show keyboard" onclick="popKeyboard();" />

我希望它对你有帮助(即使你一年前问过:))