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

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

对于ReactJS，以上解决方案均无效

我必须做：

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

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

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

HTML 5输入类型=＆＃39;日期＆＃39;禁用键盘输入

5 个答案: