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

【问题标题】：How can I focus on a text input without showing on-screen keyboard如何在不显示屏幕键盘的情况下专注于文本输入
【发布时间】：2018-09-16 10:32:35
【问题描述】：

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

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

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

我能够在 Android 上的 Google Chrome 和 Opera Mobile 中重现此问题，并且显然它发生在 iPhone 上，尽管我没有设备可以对其进行测试。

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

选项二在 Angular <input matInput [readonly]="showInput"> 上有效。在 nogOnInit() this.showInput = true; 和 ngAfterViewInit setTimeout(() => { this.showInput = false; this.inputBarcode.nativeElement.focus(); }, 500);
AFAICT “只读”解决方案会导致 iOS 出现问题。输入正确显示为焦点和键盘保持向下，但如果我随后手动点击文本框，键盘仍然不显示并且我无法输入文本（即使使用外部键盘）。我必须先点击其他地方使其模糊，然后点击它才能再次工作。

【解决方案2】：

如果我做对了，您还可以考虑更改在单击“任意位置”时聚焦文本字段的逻辑。在触摸设备上，触摸事件首先被调度，您可以取消点击处理（查找 preventDefault()，返回 false；或 stopPropagation()，应该在您的触摸事件处理程序中调用）。

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

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

【讨论】：