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

Manually triggering the iPhone/iPad/iPod keyboard from JavaScript

提问by Joe Bienkowski

I am developing an HTML code editor using simple DIV's and capturing events. When I use this on the iPad the keyboard never pops up since i'm not technically in an editable field.

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

Is there a way to programatically tell the iPad that I need a keybaord?

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

回答by Howard

If your code is executed via something that was initiated via a user action then it will work.

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

E.g;

例如;

this works (pops keyboard):

这有效（弹出键盘）：

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

this doesn't work (input gets a border but no keyboard pop):

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

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

回答by Tony Findeisen

Place a transparent textarea over the contentEditable div. The keyboard will open, as soon as the user focus the textarea.

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

Register an event listeneron the textarea for the focusevent and set the visibilityof the textarea to hidden. This prevents the blinking cursor.

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

Set the visibilityof the textarea back to visibleafter the blurevent occurred.

设置visibilitytextarea的背到visible了之后blur发生的事件。

Register additional event listeners for keydown, keyup, keypressevents and process theses events the same way, as you process them in the contentEditable div.

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

回答by Yotam Omer

To make the keyboard show on iOS devices you need to focus on an editable element such as an inputor a textarea. Furthermore, the element must be visibleand the .focus()function must to be executed in response to a user interaction such as a mouse click.

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

The thing is - we DON'T want the input element to be visible.. I have fiddled with this for quiet some time and eventually got the result I was looking for.

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

First, create an element you want to use to show the keyboard - in this case a button, and a hidden input element: (Working jsFiddleor Test on a mobile device)

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

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

Then use the following javascript:

然后使用以下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
});

Notes:

笔记：

1. I have noticed that iOS safari will automatically scroll and zoom to the area of the input so make sure you use proper viewportand position your input element in a relevant location.
2. You can use some CSS on your input like setting the opacity, heightand widthto 0. However, if your input is completely hidden this won't work again, so make sure you leave the paddingor borderjust so there's something to be rendered (even though it won't show up due to the opacity). This also means you shouldn't use display:noneto hide it, hidden elements are just not allowed to be focused.
3. Use the regular keyboard events (keydown, keypress, keyup) on your hidden input to access the user's interaction as you would normally do. Nothing special here.

1. 我注意到 iOS safari 会自动滚动并缩放到输入区域，因此请确保使用正确的视口并将输入元素放置在相关位置。
2. 你可以使用一些CSS您的输入，如设置的opacity，height并width给0。但是，如果您的输入完全隐藏，这将不再起作用，因此请确保您离开padding或border只是为了渲染某些内容（即使由于不透明而不会显示）。这也意味着你不应该使用display:none隐藏它，隐藏的元素不允许被聚焦。
3. 在您的隐藏输入上使用常规键盘事件 ( keydown, keypress, keyup) 来访问用户的交互，就像您通常所做的那样。这里没什么特别的。

回答by TimDog

I have found that calling prompt("Enter some value")does trigger the keyboard on my iPad 2. Not sure if this is helpful in your situation or not.

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

回答by Maciej Sawicki

Proxy input trick

代理输入技巧

I figured out another dirty workaround, but works well. The trick is based on the fact, that if the keyboard is already open, changing the focus will not close the keyboard.

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

1. Add a small "proxy invisible input" in top left of the page with position fixed (the fixed position prevents the flicker, also make sure that the field has font-size bigger than 16px to prevent iOS page zoom on focus)
2. On clicking the button, just .focus()on this invisible field. The keyboard will open...
3. Show or render your other input fields
4. Now with the keyboard open just .focus()on the desired input. You can use small setTimeout delay, for example 500ms if needed

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

回答by Greg

The answers to this questions suggest that it's not possible: Why doesn't @contenteditable work on the iPhone?

这个问题的答案表明这是不可能的：为什么@contenteditable 在 iPhone 上不起作用？

A colleague of mine who was working on a similar project ended up using a textarea for the iPad version of his editor, and contenteditable divs/spans for browsers that support contenteditable. Perhaps something similar would work for you.

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

回答by Villi Katrih

Here's a solution for you:

这里有一个解决方案：

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

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