Chrome HTML 5输入类型='date'禁用键盘输入

h9vpoimq  于 2023-04-03  发布在  Go
关注(0)|答案(8)|浏览(222)

我正在使用Chrome Packaged App,所以我的代码只能在Chrome中运行。
我有以下输入

<input type="date" />

https://jsfiddle.net/jhbo4q2k/
在Chrome上,这会自动添加一个DatePicker。我想只保留这个DatePicker,并禁用键盘输入。
这可能吗?
编辑:
公认的答案是有效的。只是要警惕这一点
https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts
您不能在打包的应用程序中使用内联脚本。

uttx8gqw

uttx8gqw1#

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

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

h22fl7wq2#

对于ReactJS,上述解决方案不起作用
我不得不做:

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

fsi0uk1n3#

你好,你可以通过使用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>
sy5wg1nm

sy5wg1nm4#

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

x0fgdtte

x0fgdtte5#

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

步骤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>

霍普这可能对你有帮助

odopli94

odopli946#

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

const inputDate = document.querySelector("input");

inputDate.addEventListener("keydown", function (e) {
  e.preventDefault();
});
<input type="date">
w46czmvw

w46czmvw7#

如果你使用第三方库来控制输入,比如react-hook-form,这意味着你必须在表单控件上包含onKeyDown,只有这样你才能防止onKeyDown在输入类型日期上。

<Controller
                    onKeyDown={(e) => e.preventDefault()}
                    name="date"
                    control={control}
                    render={({ field, value }) => (
                        <Form.Control
                            value={value}
                            {...field}
                            onKeyDown={(e) => e.preventDefault()}
                            type="date"
                            id="date"
                            className="formcontrol"
                            placeholder="Pick the date"
                            
                        />
                    )}
                />
5gfr0r5j

5gfr0r5j8#

禁用键盘输入是一个很好的方法,使您的应用程序不太容易为残疾人所访问,并使其不那么用户友好。一般来说,在我看来,键盘输入比日期选择器更容易使用,特别是如果预期的格式是明确的。你最好做一些基本的字段验证,以确保输入是明智的,然后再让它提交。默认情况下,Chrome Firefox和Edge上HTML日期字段已经具有强验证功能。

相关问题