HTML 5 Input type='date' 禁用键盘输入答案

【问题标题】：HTML 5 Input type='date' disable keyboard inputHTML 5 Input type='date' 禁用键盘输入
【发布时间】：2015-06-25 06:37:28
【问题描述】：

我正在开发 Chrome 打包应用程序，因此我的代码只能在 Chrome 中运行。

我有以下输入

<input type="date" />

https://jsfiddle.net/jhbo4q2k/

在 Chrome 上，这会自动添加一个 DatePicker。我只想保留这个 Datepicker 并禁用键盘输入。

这可能吗？

编辑：

接受的答案有效。请注意这一点

https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts

您不能在打包的应用程序中使用内联脚本。

【问题讨论】：

是的，您可以禁用该输入的 keydown 事件

标签： html google-chrome

【解决方案1】：

您可以使用onkeydown 并阻止用户输入值。

&lt;input type="date" onkeydown="return false" /&gt;

【讨论】：

键盘仍然弹出

【解决方案2】：

您好，您可以使用 onfocus="blur()" 来防止键盘弹出。因为当元素获得焦点时，我们将移除焦点（原生键盘不会显示）但是通过 onclick 我们可以继续我们的操作。

 <input type="date" class="form-control"  onfocus="blur()" onclick="dosomework()" name="some-name" id="some-id" >
<script>

function dosomework(){
 alert('hi');
 }

<script>

【讨论】：

【解决方案3】：

对于 ReactJS，上述解决方案不起作用

我必须这样做：

<input type="date" onKeyDown={(e) => e.preventDefault()} .... />

【讨论】：

【解决方案4】：

如果使用 django 表单；

datetime = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
            'onkeydown': 'return false' # If you want to disable the keyboard
            "onfocus": 'blur()' # If you also want to disable virtual keyboard(on smartphones).
        }))

或

document.getElementById('id_datetime').onkeydown = (e) => {
    e.preventDefault();
}
document.getElementById('id_datetime').setAttribute('onfocus', 'blur()');

Django 只是在输入字段名称前添加“id”并将其设置为它的 id。这里输入的字段名称是datetime，所以id就是id_datetime。

【讨论】：

【解决方案5】：

启用和禁用输入日期的简单方法：

第 1 步：创建输入日期。

&lt;input type="date" id="dateEnd"&gt;

第 2 步：创建启用和禁用按钮

<button onclick="disableBtn()">Disable Date Field</button>
<button onclick="undisableBtn()">Undisable Date Field</button>

第 3 步：启用和禁用 Javascript

<script>
function disableBtn() {
  document.getElementById("dateEnd").disabled = true;
}

function undisableBtn() {
  document.getElementById("dateEnd").disabled = false;
}
</script>

希望对您有所帮助。

【讨论】：

【解决方案6】：

禁用键盘输入是一种很好的方法，可以让残障人士更难以访问您的应用程序，并且总体上使其用户友好性降低，在我看来，键盘输入比日期选择器更容易使用，尤其是在预期格式明确的情况下.你最好做一些基本的字段验证，以确保在提交之前输入是合理的，默认情况下，HTML 日期字段在 Chrome Firefox 和 Edge 上已经对其进行了强大的验证。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。