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

标签 javascript focus html-input soft-keyboard

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

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

enter image description here

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

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

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

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

最佳答案

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

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

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

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

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

关于javascript - 如何在不显示屏幕键盘的情况下专注于文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49692068/

相关文章:

javascript - 使用 JavaScript 动态切换占位符颜色

focus - 在页面加载时将焦点设置为 Elementor 搜索表单

javascript - 禁用 HTML 输入列表的建议

javascript - 填充选择

javascript - 淡入新背景并在 10 秒后淡出

javascript - 设置一个等于当前选定链接的数据属性的变量

javascript - 将 zclip 分配给隐藏 div 中的多个链接时出现问题

c# - 连接网络摄像头

mvvm - Prism/mvvm : how to bind GotFocus of View to an action?

javascript - 使用 html 输出标签时有没有办法控制图像的大小?