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

Question

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

在下面的屏幕截图中，有一个输入字段。它允许输入文本，并避免诸如“如果文本字段未聚焦输入什么都不做”之类的问题，它会在单击外部时自动聚焦——这确实改善了台式计算机的体验。但是，在带有软键盘的设备上，这会导致屏幕键盘出现在分散注意力的移动设备上。

考虑到单击任何地方聚焦文本输入，是否有可能使屏幕键盘仅在按下文本字段时出现？或者，以某种方式检测启用了软件键盘的设备并为它们禁用此功能。最好不要明确尝试检测移动设备、触摸屏或其他任何存在的带有硬件键盘的触摸屏设备。

这个问题我能够在 Android 上的 Google Chrome 和 Opera Mobile 中重现，显然它发生在 iPhone 上，尽管我没有设备可以测试它。

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

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

Answer 1

简短的回答是，这是一个内置函数，您无法阻止它，但有几个选项需要考虑。

1）使用onFocus事件立即触发blur事件再次隐藏键盘。

2) 在元素上设置 readonly="true"，稍后将其删除并触发焦点事件。

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

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