输入焦点时隐藏ios设备上的键盘

Posted 2023-03-12

【中文标题】输入焦点时隐藏ios设备上的键盘

【英文标题】：hide keyboard on ios device when focus in input

【发布时间】：2013-08-22 15:11:15

【问题描述】：

当某些插件（或其他代码）使用纯 javascript（或 jquery 库）将焦点设置到 html 页面上的输入元素时，我想在 ipad 设备上隐藏虚拟键盘

【问题讨论】：

在输入元素上设置焦点后，您期望发生什么？如果没有键盘，为什么要首先关注它？

为什么要专注于输入而不显示键盘？

好的，接下来的情况如何。我有一个带有 3 个输入的弹出窗口。当我点击提交按钮从验证插件（[链接]github.com/posabsolute/jQuery-Validation-Engine）运行验证功能时，虚拟键盘在页面上闪烁，之后一切正常。

您为什么不想专注于输入？答：程序化输入。

【参考方案1】：

如果您需要纯 javascript 解决方案，请使用此行：

document.activeElement.blur();

这一行移除了活动元素上的焦点并隐藏了键盘。

---

参考

MDN document.activeElement MDN HTMLElement.blur

【讨论】：

这非常适合移除移动设备上的屏幕键盘。谢谢！

【参考方案2】：

您必须再次对其进行模糊处理，但键盘可能会闪烁。

$('input').on('focus', function()  $(this).blur(); );

或者，取决于您是否动态创建了input 元素。

$('#wrapper').on('focus', 'input', function()  $(this).blur(); );

【讨论】：

我认为这将是最好的方法。 +1

接下来的情况如何。我有一个带有 3 个输入的弹出窗口。当我点击提交按钮时，从验证插件（[link]github.com/posabsolute/jQuery-Validation-Engine）运行验证功能并且虚拟键盘在页面上闪烁，之后一切正常。

为什么不连接对模糊上的所有字段的验证，而不是点击验证按钮？

【参考方案3】：

Typescript 版本需要在 HTMLElement 上触发 blur()。像这样：

let myElement: HTMLElement;
myElement = <HTMLElement>document.activeElement;
myElement.blur()

【参考方案4】：

有时，它需要等待一段时间。

setTimeout(function()  document.activeElement.blur(); , 100);