1

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 ignores autocomplete="off"

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 />

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)

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.."

DJDave
  • 751
  • 1
  • 10
  • 23

1 Answers1

2

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");
});
dganenco
  • 1,403
  • 3
  • 16