jquery - 显式强制显示 jquery datepicker 日历

Question

我有一个链接到 JQuery 日期选择器的文本框，Chrome 毫无帮助地预先填充了用户的姓名。我在字段中设置了 autocomplete="off"，但这没有效果

Chrome ignores autocomplete="off"

显然，Chrome 的行为对于开发人员来说是一个长期存在的问题，我不清楚目前的情况是什么。其中一个解决方案的标题是“现代方法”，但那是四年前的事了。不过，我喜欢它解决问题的方式

<input type="text" onfocus="this.removeAttribute('readonly');" readonly />

因为它不需要多余的字段，而且看起来它可能会经受住 Chrome 设计者为确保表单创建者无法控制自己的表单而采取的下一步行动。 (我引用了Disabling Chrome Autofill中mindplay.dk的评论)

但是，尽管此解决方法成功地防止了自动完成，但当用户单击该字段时，它会终止日期选择器日历的弹出窗口，大概是因为我已经定义了显式的 onfocus 事件。我想我只需要在 onfocus 代码中显式添加显示日历 - 如果我知道怎么做？我猜是这样的..

onfocus="this.removeAttribute('readonly'); this.JQuery.showPicker();"

也很高兴接受这样的答案:“现在有一种更好的、面向 future 的方法来做到这一点......”

Answer 1

根据官方文档，您应该使用 datepicker('show')方法来实现你的目标。我已经准备好了sample fiddle为你。

const selector = '#datepicker';
$(selector).datepicker(); // init datepicker

$(selector).on('focus', function() {
  $(this).datepicker("show");
});