jQuery UI Datepicker Slow во время ввода

Question

Я слышал все эти замечательные впечатления от того, насколько велика и изящна jQuery, но я для 2 попытки реализовать элементы управления jQuery в реальных проектах из-за низкой производительности. На этот раз я столкнулся с аналогичной проблемой, как Richard. В jQuery UI DatePicker не удалось выполнить тестирование приёма пользователей в приложении ASP.NET, над которым я работаю, потому что при вводе текста в текстовое поле происходит определенное отставание при вводе последних двух чисел. (например, '1/1/20 ').

Кто-нибудь знает о параметре/подходе, который остановит пользовательский интерфейс jQuery от вмешательства пользователя в текстовое поле, к которому он привязан?

Answer 1

У меня была такая же проблема в IE 6. Я использовал инструмент производительности (DynaTrace Ajax Edition), чтобы узнать, где находится отставание, и нашел его в функции даты обновления, выполненной в событии keyup. Итак, моя работа заключалась в деактивации события keyup.

$("#idOfTheInput").unbind("keyup"); 

EDIT: Существует недостаток делать это. При вводе вручную даты датапикер не будет обновляться.

Итак, другой (? Лучше) решение, чтобы показать выбора даты только тогда, когда пользователь нажимает на маленькую кнопку с опцией showOn: 'button' (подробнее здесь: http://jqueryui.com/demos/datepicker/#icon-trigger)

Затем измените код Datepicker JQuery для обновите дату только в том случае, если отображается выбор даты. Для этого найдите функцию _doKeyUp и добавьте условие, в котором говорится: «Если вы выбрали дату, сделайте свое обновление, иначе не обновляйтесь».

_doKeyUp: function(event) { 
    var inst = $.datepicker._getInst(event.target); 
    if ($.datepicker._datepickerShowing) { 
     if (inst.input.val() != inst.lastVal) { 
      try { 
       var date = $.datepicker.parseDate($.datepicker._get(inst, 'dateFormat'), 
        (inst.input ? inst.input.val() : null), 
        $.datepicker._getFormatConfig(inst)); 
       if (date) { // only if valid 
        $.datepicker._setDateFromField(inst); 
        $.datepicker._updateAlternate(inst); 
        $.datepicker._updateDatepicker(inst); 
       } 
      } 
      catch (event) { 
       $.datepicker.log(event); 
      } 
     } 
    } 
    return true; 
}, 

Конечно, это немного противно, чтобы изменить код плагина ...

Answer 2

Чтобы расширить то, что сказал Джейсон, вы можете переопределить метод вне файла базы Ui, делая это

jQuery(function(){ 
    jQuery.datepicker._doKeyUp = function(event) { 
    var inst = jQuery.datepicker._getInst(event.target); 
    if(jQuery.datepicker._datepickerShowing) { 
     if(inst.input.val() != inst.lastVal) { 
      try { 
       var date = jQuery.datepicker.parseDate(jQuery.datepicker._get(inst, 'dateFormat'), 
                 (inst.input ? inst.input.val() : null), 
                 jQuery.datepicker._getFormatConfig(inst)); 
       if(date) { // only if valid 
        jQuery.datepicker._setDateFromField(inst); 
        jQuery.datepicker._updateAlternate(inst); 
        jQuery.datepicker._updateDatepicker(inst); 
       } 
      } 
      catch (event) { 
       jQuery.datepicker.log(event); 
      } 
     } 
    } 
     return true; 
    } 
}); 

.......