需要 HTML 表单输入且只读 - 也适用于移动设备

Posted 2023-05-07

【中文标题】需要 HTML 表单输入且只读 - 也适用于移动设备

【英文标题】：HTML form input required and readonly - for mobile too

【发布时间】：2016-05-14 09:36:23

【问题描述】：

我在 CodeIgniter 中有一个日历日期选择器。此字段是成功处理脚本所必需的，我想阻止此输入上的键盘输入 - 出于安全原因，并在智能手机上的数据输入中隐藏键盘。

现在我使用的是必填字段，并在其中添加了只读类：

<script>
    $(".readonly").keydown(function(e)
        e.preventDefault();
    );
</script>

它可以在 PC 上运行，但不能在移动设备上运行 - 例如 android。

【问题讨论】：

查看***.com/questions/7812063/jquery-datepicker-readonly 或***.com/questions/4164542/…

【参考方案1】：

使用 CSS，可以防止选择：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

您也可以尝试阻止默认点击：

$(".readonly").on("click", function(e) 
    e.preventDefault();

【讨论】：

使用 CSS 我无法输入任何内容，并且在 PC 和移动设备上的客户端（浏览器 HTML5）中需要字段，但在移动键盘中仍然显示。

脚本代码不起作用 - 我可以输入任何值来输入表单

【参考方案2】：

好的，我明白了。我用：

onfocus="blur();"

并且是必需的。

它适用于 PC 和移动设备。