如何让readonly属性在手机中运行？

Question

我有一个输入<input class="form-control" readonly>。

在桌面浏览器上，我得到了预期的行为：输入无法点击/聚焦。

但在移动电话中（目前仅在iOS / Safari上测试），当我点击输入字段时，我会收到以下行为：

正如你所看到的，有几件事正在发生。文本光标显示在输入字段中，应用程序放大，显示底部栏。如何防止输入元素在移动电话中像这样接收焦点？

编辑：建议的副本无法解决我的问题。

Answer 1

如果您想避免与某些HTML元素进行任何互动，请尝试以下操作：

/* CSS */
.__readonly {
    pointer-events: none;
}

在HTML中：

<!-- HTML -->
<input class="form-control __readonly" readonly />