如何在不显示屏幕键盘的情况下聚焦于文本输入？（相关IT技术问题）

Question

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

在下面的屏幕截图中，有一个输入字段。它允许输入文本，并且为了避免出现“如果文本字段未聚焦则无法键入”的问题，当单击其外部时自动聚焦 - 这确实改善了桌面计算机的体验。然而，在具有软件键盘的设备上，这会导致移动设备上出现分散注意力的屏幕键盘。

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

我能够在Android上的Google Chrome和Opera Mobile中重现此问题，显然在iPhone上也会发生，尽管我没有设备进行测试。

以下是一个相当简单的示例。如果您触摸粉色矩形，它将导致屏幕键盘出现，而我不希望出现这种情况。

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

- Konrad Borowski

Answer 1

简单来说，这是一个内置函数，您无法停止它，但有几个选项可供考虑。

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

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

3）创建一个带有div和CSS的虚拟输入元素，当您想要触发键盘时，将焦点集中在隐藏的输入字段上，并在用户键入时复制输入的值。

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

- digital-pollution

---

选项二可行，对于Angular <input matInput [readonly]="showInput">。在ngOnInit()中，this.showInput = true;，而在ngAfterViewInit中，setTimeout(() => { this.showInput = false; this.inputBarcode.nativeElement.focus(); }, 500);。 - Swoox

据我所知，“readonly”解决方案在iOS上会出现问题。输入框正确显示为聚焦状态且键盘不弹出，但如果我手动点击文本框，键盘仍然不会显示，我无法输入文本（即使使用外部键盘也是如此）。我必须先点击其他地方以取消聚焦，然后再次点击才能正常工作。 - CletusW

Answer 2

如果我理解正确的话，您可能还考虑更改在“任何地方”点击时聚焦文本字段的逻辑。在触摸设备上，触摸事件会首先被分派，并且您可以取消点击处理（查找preventDefault()、return false;或stopPropagation()应该在触摸事件处理程序中调用）。

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

如果您想保持聚焦文本字段的UI效果，只需通过脚本向文本字段添加CSS类“focused”，而不是使用textfield:focused{}作为您的样式。

- Wolfgang

---

我想保留UI效果，正如你建议的那样，如果我只是添加“focused”类，那么当其他字段获得焦点时，我该如何将其删除？（'blur'不会触发，因为该字段根本没有获得焦点） - Devendra Haldankar