在chrome上打开问题后，物化日期选择器自动隐藏答案

【问题标题】：Materialize Date Picker automatically hide after opening problem on chrome在chrome上打开问题后，物化日期选择器自动隐藏
【发布时间】：2019-03-16 18:36:09
【问题描述】：

Materialize datepicker 在其他浏览器和旧版 Google Chrome 中运行良好，但在新版 Google Chrome 中无法正常运行

<input type="date" class="datepicker">

JS

$('.datepicker').pickadate({

selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});

Codepen Link for Datepicker

【问题讨论】：

在将 chrome 版本更新到 73 时。我也开始出现这个问题。我也可以在物化的文档中看到这个问题。
最新版本的 Materialise 中是否存在此问题，还是仅在

标签： javascript datepicker materialize

【解决方案1】：

我遇到了同样的问题，这样解决了：

$('.datepicker').on('mousedown', function preventClosing(event) {
  event.preventDefault();
});

【讨论】：

【解决方案2】：

日期选择器的解决方案

$('.datepicker').on('mousedown',function(event){
    event.preventDefault();
})

选择框的解决方案

删除materialize.min.js中的这段代码

$(this).trigger('open', ['focus']);
or
a(this).trigger("open",["focus"]);

【讨论】：

datepicker 运行良好。选择框的解决方案对我不起作用。在 materialize.js 中进行了更改其他任何内容
同样，datepicker 解决方案有效，下拉解决方案无效，也许罪魁祸首可能是 materialize 的版本略有不同。
找到了下拉菜单的修复方法，只需注释掉 hideDropdown();在以下代码中： setTimeout(function () { $(document).on('click.' + activates.attr('id'), function (e) { // hideDropdown(); $(document).off( 'click.' + activates.attr('id')); }); }, 0);
@aman_novice 你的问题解决了吗？如果您仍然遇到问题，请在上面的评论中尝试我的修复。
@DavidC 我在“点击”事件中使用了 e.preventDefault()。有用。我仍然对“选择”字段有疑问。下拉菜单不出现。我在我的流星项目中使用materialize，而Materialize 的人自从过去1.5 年左右以来就没有将最新的代码推送到Atmosphere。

【解决方案3】：

您应该使用最新版本的 cdnjs，目前您使用的是 0.97.5，甚至比 beta 版本还早。

 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

JQuery:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

日期选择器：

HTML

<input type="text" class="datepicker">

jQuery

$('.datepicker').datepicker({
  selectMonths: true,
  selectYears: 15
});

前一个对我有用，不知道为什么它不适用于你的情况。

查看最新的Datepicker/Timepicker 文档。

CodePen Working Demo

【讨论】：

在将 chrome 版本更新到 73 时。我也开始出现这个问题。我也可以在物化的文档中看到这个问题。因为整个应用程序是使用旧版本制作的，所以我不能使用新版本。还有其他解决方案吗？
文档中的问题是什么意思？
在我更新 chrome 后，archives.materializecss.com/0.100.2/forms.html 也会发生同样的事情
@DivyaBarsode ，我也使用了以前版本的物化，我不能使用这个答案，但对我有用的是“Nico JL”的回应。添加 event.preventDefault();到 mouseDown 事件
当我们从第 3 方收到它并且高度定制时，作者如何建议我更新 materizalize css lib。答案是完全不合适的。我想，这个线程正在寻找现有代码库的解决方案。

【解决方案4】：

我通过替换 material.js 中的 setTimeout() 函数解决了这个问题。

setTimeout( function() {  
    if (giveFocus == true) {   
        P.$root.removeClass( CLASSES.opened + ' ' + CLASSES.focused )
        aria( P.$root[0], 'hidden', true )
    }
}, 0 )

您必须从 cdn 下载 js 文件，然后在文件搜索“P.$root.removeClass(CLASSES.opened + '' + CLASSES.focused)”中将函数替换为上述代码。享受:)

【讨论】：

用这个条件修改上述条件（giveFocus == true || giveFocus == null）也
上述方法在 chrome 84 中都不起作用（用于解决 SELECT）。继续研究它，因为更新不是一种选择：（

【解决方案5】：

用于实现 css 0.100 解决方案的 Chrome 84 选择/下拉菜单：

将调用 hideDropdown() 的超时时间从 0 更改为 100 毫秒。没有人会注意到它，但它也会完成这项工作:))

【讨论】：

【解决方案6】：

从 materialize.js 中删除它

$(this).trigger('open', ['focus']);

或

a(this).trigger("open",["focus"]);

【讨论】：