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

Question

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

我有以下输入

<input type="date" />

https://jsfiddle.net/jhbo4q2k/

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

这可能吗？

编辑：

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

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

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

Answer 1

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

 <input type="date" onkeydown="return false" />

Answer 2

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

我必须做：

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

Answer 3

嗨，您可以使用 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>

Answer 4

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

步骤 1：创建输入日期。

 <input type="date" id="dateEnd">

第 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>

希望，这可以帮助你。

Answer 5

用这个 ：

 <input type="date" id="date_input">

与jquery：

  $("#date_input").on("keydown", function(e) {
     e.preventDefault();
   });

Answer 6

如果使用 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 。

Answer 7

e.preventDefault() 将完成这项工作......

 const inputDate = document.querySelector("input"); inputDate.addEventListener("keydown", function (e) { e.preventDefault(); });

 <input type="date">

Answer 8

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