显式强制显示jQuery Datepicker日历

问题描述：

我有一个链接到Jquery datepicker的文本框，Chrome会无意地用用户名预先填充该文本框.我在该字段中具有autocomplete ="off"，但这对每一个都无效

I have a textbox linked to a JQuery datepicker which Chrome is unhelpfully pre-populating with the user's name.. I have autocomplete="off" in the field, but this has no effect as per

Chrome会忽略autocomplete ="off"

很明显，Chrome的行为对于开发人员来说是一个长期存在的问题，目前尚不清楚我的位置.解决方案之一被称为现代方法"，但这是四年前.但是，我喜欢它如何解决问题

Clearly Chrome's behaviour is a long-running problem for developers, and it isn't clear to me what the present position is. One of the solutions was titled "Modern approach", but that was four years ago. However, I liked how it tackled the problem

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

，因为它不需要多余的字段，并且看起来可以承受Chrome设计师的下一步行动，以确保表单创建者无法控制自己的表单. (我指的是禁用Chrome自动填充中的mindplay.dk的评论)

as it didn't require superfluous fields, and it looked like it might withstand the next move that the designers of Chrome make to ensure form creators don't have control of their own forms. (I refer to the comment from mindplay.dk in Disabling Chrome Autofill)

但是，尽管此变通办法成功地防止了自动补全，但是当用户单击该字段时，它将终止datepicker日历的弹出窗口，这大概是因为我定义了一个显式的onfocus事件.我想我只需要将显示日历显式添加到onfocus代码中-如果我知道怎么做?我猜是这样的.

However, although this workaround is successful in preventing autocompletion, it kills the pop-up of the datepicker calendar when the user clicks on the field, presumably because I have defined an explicit onfocus event. I figure I just need to add displaying the calendar explicitly to the onfocus code - if I knew how? Something like this I guess..

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

也很高兴接受这样的回答:现在有一种更好的，可验证未来的方式."

Also quite happy to accept an answer that says "there's now a better, future-proofed way of doing this.."

答

根据官方文档，您应该使用样本小提琴.

According to the official documentation you should use datepicker('show') method to achieve your goal. I've prepared sample fiddle for you.

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

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

显式强制显示jQuery Datepicker日历

相关推荐