如何在不显示屏幕键盘的情况下专注于文本输入

Question

我正在制作一个聊天服务，我想很好地支持移动设备。

在下面的屏幕截图上，有一个输入字段。它允许输入文本，并且为了避免像“如果文本字段没有被聚焦输入什么都不能做”这样的问题，当在文本字段之外单击时，它会自动获得聚焦--这确实改善了桌面计算机的体验。但是，在具有软件键盘的设备上，这会导致屏幕上的键盘出现在移动设备上，这会分散注意力。

​

​

考虑到在文本输入的任意位置单击鼠标，有没有可能让屏幕上的键盘只在按下文本字段时出现？或者，以某种方式检测启用了软件键盘的设备，并对其禁用此功能。优选地，不显式地尝试检测移动设备、触摸屏等，因为存在具有硬件键盘的触摸屏设备。

这个问题我可以在安卓系统上的谷歌浏览器和Opera Mobile上重现，显然它在iPhones上也会发生，尽管我没有设备来测试它。

这是一个非常简单的问题示例。如果你触摸粉红色的矩形，它会导致触摸键盘出现，这是我不想要的。

​

<input type=text id=f>
<div style="background: pink; height: 200px; width: 200px" onclick="f.focus()">

​

Answer 1

简而言之，这是一个内置函数，您无法停止它，但有几个选项需要考虑。

1)使用onFocus事件立即触发模糊事件以再次隐藏键盘。

2)在元素上设置readonly=为true，稍后移除并触发focus事件。

3)使用div和css创建一个伪input元素，当您想要在隐藏的输入字段上触发键盘焦点并在用户键入时复制出keyup事件上的输入值时。

希望这些建议能对你有所帮助。

Answer 2

如果我没弄错的话，您可能还会考虑更改在单击“任何位置”时聚焦文本字段的逻辑。在触摸设备上，触摸事件首先被分派，您可以取消点击处理(查找preventDefault()，返回false；或者应该在触摸事件处理程序中调用的stopPropagation() )。

您需要另一个事件侦听器来处理文本字段之外的触摸事件，例如"touchstart“。

如果你想保持聚焦文本字段的ui效果，只需通过脚本将css类" focused“添加到文本字段中，而不是使用textfield:focused{}作为样式。