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

Question

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

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

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

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

编辑:建议的副本不能解决我的问题.

Answer 1

And*_*sky -1

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

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

在 HTML 中：

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