从JavaScript手动触发iPhone/iPad/iPod键盘

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

---

有没有办法通过编程告诉iPad我需要一个键盘？

这个问题的答案表明这是不可能的：

---

我的一位同事在做一个类似的项目，结果他在iPad版本的编辑器中使用了textarea，而在支持contenteditable的浏览器中使用了contenteditable divs/span。也许类似的方法也适用于您。

我发现，调用

提示符（“输入一些值”）

确实会触发我的iPad2上的键盘。不确定这在您的情况下是否有用。

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

例如,

这可以工作（pops键盘）：

点击

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

window.onload=函数（）{
$（“foo”）.focus（）；
}

这里有一个解决方案：

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

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

var textbox=document.getElementById（'my-input'）；
textbox.select（）；

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

为

焦点

事件在文本区域注册

事件侦听器

，并将文本区域的

可见性

设置为

隐藏

。这可以防止光标闪烁

在

模糊

事件发生后，将文本区域的

可见性

设置回

可见

---

为

keydown

、

keydup

、

keypress

事件注册其他事件侦听器，并以与在contentEditable div中处理事件相同的方式处理这些事件。

要使键盘在iOS设备上显示，您需要关注可编辑元素，如

输入

或

文本区域

。此外，元素必须可见，并且必须执行

.focus（）

功能以响应用户交互（如鼠标单击）

问题是-我们不希望输入元素可见。。 我已经安静地摆弄了一段时间，最终得到了我想要的结果

首先，创建一个用于显示键盘的元素——在本例中是一个按钮和一个隐藏的输入元素：（或）

注:

我注意到iOS safari将自动滚动并缩放到输入区域，因此请确保使用正确的视口，并将输入元素放置在相关位置

您可以在输入上使用一些CSS，例如将

不透明度

、

高度

和

宽度

设置为

0

。但是，如果您的输入被完全隐藏，这将无法再次工作，因此请确保您保留

填充

或

边框

，以便能够渲染某些内容（即使由于不透明度，它不会显示）。这也意味着您不应该使用

display:none

来隐藏它，隐藏的元素只是不允许被聚焦

在隐藏的输入上使用常规键盘事件（

keydown

、

keypress

、

keypup

）来访问用户的交互，就像您通常所做的那样。这里没什么特别的

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

在页面左上角添加一个小的“代理不可见输入”，位置固定（固定位置可防止闪烁，同时确保该字段的字体大小大于16px，以防止iOS页面焦点缩放）

单击按钮后，只需在该不可见字段上单击

.focus（）

。键盘将打开

显示或渲染其他输入字段

现在打开键盘，只需对所需输入进行

.focus（）

。如果需要，可以使用较小的设置超时延迟，例如500ms

---

我认为内容编辑是一个完全不同的野兽。这需要在浏览器级别实现。我只是想让键盘显示出来，并将按键事件发送到文档中，我的编辑器会处理其余的事情。难道不能使用JS来检测用户是否来自iPad，然后用文本区域替换可编辑的DIV吗？这不是问题的答案。OP希望知道如何告诉iOS使用javascript打开键盘。select（）函数显示键盘。select（）函数不显示键盘！你知道如何通过编程测试我的代码是否被认为是“通过用户操作启动的”吗？

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

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

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

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

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