使平板拾取器输入成为必需的 [英] Make flatpickr input required

问题描述

我正在项目上使用令人惊叹的flatpickr，并且需要将日历日期设置为必填项。

我尝试将所有验证都放在原生HTML中，所以我天真地尝试将required属性添加到输入标记，但这似乎不起作用。

有没有什么方法可以用flatickr将日期设置为必填项，或者我需要写一些自定义检查？

推荐答案

这是我想出的尽可能完整的解决方案。它阻止表单提交(当未选择日期且不需要输入时)，确保弹出浏览器本机必填字段消息，并阻止用户直接输入值。

flatpickrConfig = {
    allowInput: true, // prevent "readonly" prop
    onReady: function(selectedDates, dateStr, instance) {
        let el = instance.element;
        function preventInput(event) {
            event.preventDefault();
            return false;
        };
        el.onkeypress = el.onkeydown = el.onkeyup = preventInput; // disable key events
        el.onpaste = preventInput; // disable pasting using mouse context menu

        el.style.caretColor = 'transparent'; // hide blinking cursor
        el.style.cursor = 'pointer'; // override cursor hover type text
        el.style.color = '#585858'; // prevent text color change on focus
        el.style.backgroundColor = '#f7f7f7'; // prevent bg color change on focus
    },
};

这样做有一个缺点：当平板选取器打开时(当输入具有焦点时)，键盘快捷键被禁用。这包括F5、Ctrl+r、Ctrl+v等，但出于某种原因不包括Linux上Chromium 88中的Ctrl+w。我是用一个相当老的平板选择器3.1.5版开发的，但我认为它也应该能在较新的版本上运行。

如果您想使用altFormat(向用户显示一种日期格式，将其他日期格式发送到服务器)，这也意味着设置altInput: true，您还必须将onReady函数更改为使用instance.altInput，而不是instance.element。

onReady事件侦听器可能会在初始化实例后附加到该实例。但是，我打算在vue-flatpickr-component中使用flatickr，因为您无法优雅地访问各个flatickr实例，这让我改用了配置字段。

我还没有在移动设备上测试过。

这篇关于使平板拾取器输入成为必需的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！