使用 iFrame 表单（iOS Safari）后，iPhone 数字键盘不断弹出
Posted
技术标签:
【中文标题】使用 iFrame 表单（iOS Safari）后，iPhone 数字键盘不断弹出【英文标题】：iPhone numbers keyboard keeps popping up after using iFrame form (iOS Safari) 【发布时间】：2018-06-09 11:31:01 【问题描述】：我们的 React Web 应用程序使用 Stripe 元素表单进行结帐（请参阅 here 了解详细信息）。它将 iFrame 表单注入网站。正如预期的那样，在 ios Safari 上使用该网站时，当用户专注于 Stripe 输入时，会弹出信用卡键盘。
但后来事情出错了。首先，如果用户点击页面上的其他地方，键盘会保持向上。不是什么大问题，因为您可以点击“完成”来关闭键盘。
然后 - 任何时候用户点击网站，键盘都会弹出。 点击“完成”没有任何作用 - 在下一次点击时，它会再次弹出。在用户关注另一个输入字段后，它终于停止了。
当 React 组件卸载时，我尝试在 Stripe 元素上手动调用 blur()，但没有成功。令人难以置信的是，您可以使用 Xcode 模拟器复制此问题。到底是怎么回事？
【问题讨论】：
我在 iPhone 上使用 Square Pay 的表单时遇到了同样的问题。这似乎是一个 iframe 问题。很烦人。如果我解决了，我会告诉你的。 作为临时修复，在有人提交卡片后，我安装一个隐藏的文本输入字段并调用 focus() 然后 blur() 。傻。 这对我也有用。我正在考虑使用 square 的 api 而不是它们的形式。 【参考方案1】：您是否有机会在 iOS 上使用 Firefox？
我刚遇到这个问题：我会单击一个输入框，然后单击键盘上的“x”或“完成”，然后每当我单击其他任何地方时，键盘都会弹回。
模拟它的代码在这里
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div>
<input value="hiya">
</div>
<div>Click here after clicking the input and the keyboard will come back.</div>
</body>
</html>
在 Safari 或 Chrome 上不会发生这种情况。
【讨论】：
这发生在我的 iOS Safari 上，而且只有 Stripe 输入字段 :) 但这个错误听起来很相似以上是关于使用 iFrame 表单（iOS Safari）后，iPhone 数字键盘不断弹出的主要内容，如果未能解决你的问题，请参考以下文章
在移动 Safari 中按下后退按钮后，Javascript 停止在 iframe 中执行