Android 无法聚焦表单域答案

【问题标题】：Android unable to focus form fieldsAndroid 无法聚焦表单域
【发布时间】：2014-09-16 03:21:50
【问题描述】：

我在这里完全不知所措，而且因为我没有 Android 设备，所以很难弄清楚发生了什么，并且无法在模拟器中复制它。由于未知原因，Android 上的 Chrome 在关注表单字段时遇到问题，用户开始抱怨。在其他平台上一切正常 - 包括 Windows/Mac/iOS 上的 Chrome。

出现问题的网站不再损坏，因为问题已解决。

任何指导将不胜感激。

【问题讨论】：

我怀疑它们被 vimeo 视频播放器 iframe “掩盖”了。尽管它设置为可见性：隐藏，但它似乎仍在其正常位置保留空间。打开表单时，vimeo iframe 在它们之上，它只是不可见的。也许当人们点击表单元素时，android 认为这是对 iframe 的点击。我还不是 100% 确定，但是一个简单的测试方法是将 iframe 设置为 display:none，以及 visibility:hidden，这会阻止它为自己保留空间。当 iframe 可见时，还可以临时设置 display:block。

【解决方案1】：

我在本地做了一些测试，并确认我的评论是正确的。如果将 vimeo iframe 设置为 display: none;这将允许在 android / chrome 上点击表单元素。因此，您需要进行三处更改：

我相信这会解决问题并且没有负面的副作用。

【讨论】：

【解决方案2】：

Vimeo iframe 占据焦点，因此输入字段不可点击。

仅在选择模态时，将宽度和填充顶部设置为包含vimeo iframe的模态。

更改以下 css 选择器：

.modal .modal-inner.modal-video {
    width: 90% !important;
    padding-top: 50.625%;
}

到

.modal .modal-state:checked+.modal-window .modal-inner.modal-video {
    width: 90% !important;
    padding-top: 50.625%;
}

【讨论】：

【解决方案3】：

那个网站在我的设备上非常滞后，也许你应该重新考虑设计。或者让平板电脑/手机更简单。

尽管如此，我发现（包括）“你最喜欢的三部电影是什么？”之后的文本字段可以正确聚焦，并且似乎在第一个文本字段的顶部有一些视图表格。

也许这可以引导您朝着正确的方向前进。祝你好运！

【讨论】：