【问题标题】：Manually triggering the iPhone/iPad/iPod keyboard from JavaScript从 JavaScript 手动触发 iPhone/iPad/iPod 键盘
【发布时间】：2011-06-04 07:56:49
【问题描述】：

我正在开发一个使用简单 DIV 和捕获事件的 HTML 代码编辑器。当我在 iPad 上使用它时，键盘永远不会弹出，因为我在技术上不在可编辑字段中。

有没有办法以编程方式告诉 iPad 我需要键盘？

【问题讨论】：

难道不能用JS来检测用户是否来自iPad，然后用textarea替换你的可编辑DIV吗？

标签： javascript iphone html ipad keyboard

【解决方案1】：

代理输入技巧

我想出了另一个肮脏的解决方法，但效果很好。诀窍是基于这样一个事实，即如果键盘已经打开，则更改焦点不会关闭键盘。

在页面左上角添加一个小的“代理不可见输入”，位置固定（固定位置防止闪烁，同时确保该字段的字体大小大于16px，以防止iOS页面放大焦点）
点击按钮后，只需在这个不可见的字段上.focus()。键盘将打开...
显示或呈现您的其他输入字段
现在打开键盘，只需.focus() 输入所需的输入。如果需要，您可以使用小的 setTimeout 延迟，例如 500 毫秒

【讨论】：

I wrote some code that does this here

【解决方案2】：

要在 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
});

注意事项：

我注意到 iOS Safari 会自动滚动和缩放到输入区域，因此请确保使用正确的视口并将输入元素放置在相关位置。
您可以在输入中使用一些 CSS，例如将 opacity、height 和 width 设置为 0。但是，如果您的输入被完全隐藏，这将无法再次工作，因此请确保您留下 padding 或 border，以便有一些东西可以渲染（即使由于不透明而不会显示）。这也意味着你不应该使用display:none 来隐藏它，隐藏的元素是不允许被聚焦的。
像往常一样使用隐藏输入上的常规键盘事件（keydown、keypress、keyup）来访问用户的交互。这里没有什么特别的。

【讨论】：

【解决方案3】：

在 contentEditable div 上放置一个透明文本区域。一旦用户关注文本区域，键盘就会打开。

在 textarea 上为 focus 事件注册一个 event listener，并将 textarea 的 visibility 设置为 hidden。这可以防止闪烁的光标。

在blur 事件发生后，将textarea 的visibility 设置回visible。

为keydown、keyup、keypressevents 注册其他事件侦听器，并以与在 contentEditable div 中处理它们相同的方式处理这些事件。

【讨论】：

这不是问题的答案。 OP 希望知道如何告诉 iOS 使用 javascript 打开键盘。

【解决方案4】：

这里有一个解决方案：

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

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

【讨论】：

select() 函数显示键盘。
select() 函数不显示键盘！

【解决方案5】：

如果您的代码是通过用户操作启动的某些东西执行的，那么它将起作用。

例如;

这有效（弹出键盘）：

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

这不起作用（输入有边框但没有键盘弹出）：

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

【讨论】：

知道如何以编程方式测试我的代码是否被视为“通过用户操作启动”吗？

【解决方案6】：

我发现调用 prompt("Enter some value") 确实会触发我的 iPad 2 上的键盘。不确定这对您的情况是否有帮助。

【讨论】：

【解决方案7】：

这个问题的答案表明这是不可能的：Why doesn't @contenteditable work on the iPhone?

我的一位同事正在从事一个类似的项目，他的 iPad 版编辑器使用了 textarea，而支持 contenteditable 的浏览器则使用了 contenteditable div/spans。也许类似的东西对你有用。

【讨论】：

我认为 Content Editable 完全不同。这是需要在浏览器级别实现的东西。我只是想让键盘出现并将按键事件发送到文档，我的编辑器会处理其余的。