JQuery DatePicker застрял в открытом, если метка нажата из открытого состояния - PullRequest
Новая
       21

JQuery DatePicker застрял в открытом, если метка нажата из открытого состояния

4 голосов
/ 24 февраля 2012

Я использую плагин jQuery UI Datepicker и обнаружил, что если плагин открыт и пользователь щелкает фокус настройки элемента метки на поле, к которому привязан указатель даты, происходит событие размытия, таким образом средство выбора даты исчезает. За ним сразу же следует событие фокуса, снова исчезает указатель даты. Однако, когда событие размытия запускается снова, диалоговое окно указателя даты остается открытым, когда поле ввода теряет фокус.

Моя разметка довольно проста: 

<label>Select date <input type="text" id="datepicker" /></label>
<script type="text/javascript">$('#datepicker').datepicker(options);</script>

Я воспроизвел ошибку на странице выбора даты jQuery UI , набрав в консоли следующее: 

$('h2:first').html('<label for="datepicker">Datepicker</label>');

Когда средство выбора даты открыто, попробуйте щелкнуть заголовок.

Полагаю, я могу удалить метку для средств выбора даты, и отключение анимации может помочь, но я хочу сохранить пользовательский интерфейс, который обеспечивают эти функции. Может ли кто-нибудь помочь мне с каким-то вдохновением, как решить эту проблему?

Ответы [ 3 ]

5 голосов
/ 02 марта 2012

У меня была точно такая же проблема, как и у вас (на самом деле ваш вопрос возник во время моего поиска в Google).

Я считаю, что проблема в версии jQueryUI, которую вы используете, по сравнению с той, что была показана в jsFiddle @ ShadowScripter. Я столкнулся с этой проблемой, используя v1.8.17 и v1.8.18, но jsFiddle использует v1.8.16 (который не воспроизводит ошибку). Вот jsFiddle , который воспроизводит ошибку, используя v1.8.18.

Итак, я разошелся с v.18 против v.16, немного поменял код и нашел виновника:

В Datepicker.prototype._hideDatepicker, postProcess() определяется как:

v1.8.18: 

var self = this;
var postProcess = function() {
    $.datepicker._tidyDialog(inst);
    self._curInst = null;
};

v1.8.16 

var postProcess = function() {
    $.datepicker._tidyDialog(inst);
    this._curInst = null;
};

Таким образом, если щелкнуть label при открытом datepicker, this в v.16 postProcess() - это объект HTMLDivElement, а в v.18 self - Datepicker объект. _curInst является атрибутом Datepicker, поэтому код в v.16 присваивает _curInst неправильному объекту (HTMLDivElement вместо Datepicker). Эта ошибка исправлена ​​в v.18, но в ней появилась ошибка «застрял в открытом состоянии».

Простое удаление self._curInst = null; из v.18 исправляет ошибку «зависание при открытии». Я не уверен, с какими побочными эффектами это может возникнуть, но я не заметил никаких проблем во время первоначального тестирования, хотя ваши результаты могут отличаться.

2 голосов
/ 25 апреля 2012

Это исправлено в Jquery UI v1.8.19

0 голосов
/ 24 февраля 2012

Хм, я не могу воспроизвести вашу проблему.
Когда я пытаюсь это сделать в этом JSFiddle , фокус все равно остается на входе.
В любом случае правильный HTMLразметка для метки не предназначена для охвата всего ввода внутри метки.
Для этого и используется атрибут for.

Сделайте это вместо 

<label for="datepicker">Select date</label><input type="text" id="datepicker" />

Вот некоторая информациянасчет атрибута label for

Скорее всего, ваш собственный код мешает.Например, если вы где-то используете оператор возврата, который останавливает распространение на этом конкретном элементе.Вы можете прочитать больше об этом здесь .

...