javascript - name - width device width initial scale 1.0 maximum scale 1.0




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

代理输入技巧

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

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

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

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


在contentEditable div上放置一个透明的textarea。 一旦用户聚焦textarea,键盘就会打开。

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

blur事件发生后,将textarea的visibility设置回visible

当您在contentEditable div中处理它们时,以相同的方式为keydownkeyupkeypress事件和处理这些事件注册其他事件侦听器。


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


要在iOS设备上显示键盘,您需要关注可编辑元素,例如inputtextarea 。 此外,元素必须是可见的,并且必须执行.focus()函数以响应用户交互,例如鼠标单击。

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

首先,创建一个要用于显示键盘的元素 - 在本例中为一个按钮和一个隐藏的输入元素:( 在移动设备上使用 jsFiddleTest

<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,例如将opacityheightwidth0 。 但是,如果您的输入完全隐藏,则无法再次使用,因此请确保保留paddingborder ,以便渲染某些内容(即使由于不透明度而不会显示)。 这也意味着你不应该使用display:none来隐藏它,不允许隐藏元素被聚焦。
  3. 使用隐藏输入上的常规键盘事件( keydownkeypresskeyup )来访问用户的交互,就像通常那样。 这里没什么特别的。

这是一个适合您的解决方案:

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

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






keyboard