Question

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

在下面的屏幕截图中，有一个输入字段。它允许输入文本，并避免类似＆＃34;如果文本字段未聚焦，则不执行任何操作＆＃34;在外部点击时它会自动聚焦 - 这确实改善了台式计算机的体验。但是，在带有软键盘的设备上，这会导致屏幕键盘出现在移动设备上，这会分散注意力。

考虑点击任意位置聚焦文本输入，是否可以使屏幕键盘仅在按下文本字段时出现？或者，以某种方式检测启用了软件键盘的设备并为其禁用此功能。优选地，没有明确地尝试检测移动设备，触摸屏或任何其他存在具有硬件键盘的触摸屏设备。

这个问题我能够在Android上的谷歌浏览器和Opera Mobile中重现，显然它发生在iPhone上，虽然我没有设备可以测试它。

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

＆＃13;

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

＆＃13;

Answer 1

简短的回答是，这是一个内置功能，你不能阻止它，但有几个选项需要考虑。

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

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

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

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

Answer 2

如果我做对了，你也可以考虑在点击“任何地方”时改变聚焦文本字段的逻辑。在触摸设备上，首先调度触摸事件，然后取消单击处理（查找preventDefault（），返回false;或者应该在触摸事件处理程序中调用stopPropagation（）。

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

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