从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,键盘就会打开.

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

事件发生后visibility,将textarea 设置回.visibleblur

注册附加事件侦听器keydown,keyup,keypress事件和过程的论文事件以同样的方式,因为你在CONTENTEDITABLE格处理它们.

Answer 3

要在 iOS 设备上显示键盘，您需要关注可编辑元素，例如 aninput或 a textarea。此外，元素必须是可见的，并且.focus()必须响应用户交互（例如鼠标单击）来执行功能。

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

首先，创建一个要用于显示键盘的元素 - 在本例中是一个按钮和一个隐藏的输入元素：（在移动设备上运行jsFiddle或测试）

<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

这个问题的答案表明这是不可能的：Why does @contenteditable work on the iPhone？

我的一位同事正在从事类似的项目，最终他的编辑器的 iPad 版本使用了 textarea，并为支持 contenteditable 的浏览器使用了 contenteditable div/span。也许类似的东西对你有用。