Нажатие escape на элементе управления автозаполнением jquery - PullRequest
Новая
       7

Нажатие escape на элементе управления автозаполнением jquery

2 голосов
/ 07 декабря 2010

У меня есть набор полей.В режиме чтения они отображаются как текст в ячейке таблицы.Двойной щелчок по ячейке переводит запись в режим редактирования.Нажатие «ввод» в режиме редактирования фиксирует изменения.Нажатие «esc» в режиме редактирования возвращает в режим чтения без изменения данных.

Теперь к каждому полю добавлено управление автозаполнением пользовательского интерфейса jQuery. Когда отображается меню автозаполнения , я хочу, чтобы «ввод» вел себя как обычно для автозаполнения (замените значение на входе выбранным значением меню и закройте меню автозаполнения) без внесение изменений / возврат в режим редактирования.И при нажатии escape, , если меню открыто , выполните обычные функции автозаполнения (верните в поле редактирования его предыдущее значение и закройте меню) без возврата в режим чтения.

Я разместил демонстрацию своей проблемы здесь .В настоящее время, если вы нажмете «ввод» в одном из пунктов меню автозаполнения, автозаполнение сделает свое дело И изменения будут приняты немедленно.Нажатие escape закрывает меню автозаполнения И отменяет режим редактирования.

Ответы [ 2 ]

5 голосов
/ 08 декабря 2010

Используйте события открытия и закрытия автозаполнения, чтобы отменить привязку / повторное связывание вашего пользовательского поведения, чтобы оно происходило только тогда, когда меню автозаполнения не открыто.Это предотвратит запутывание событий.Мой рабочий код выглядит следующим образом: 

function enterEditMode() {
    $("#output").append("<div>enter edit</div>");
    $("#read").hide();
    $("#edit").val($("#read").text()).show().focus();
}

function exitEditMode() {
    $("#output").append("<div>exit edit</div>");
    $("#read").show();
    $("#edit").hide();
}

function commitChanges() {
    $("#output").append("<div>commit</div>");
    $("#read").text($("#edit").val());
    exitEditMode();
}

function handleKeydown(event) {    
    $("#output").append("<div>handle keydown:"+event.which+"</div>");
    if (event.keyCode === 27) { exitEditMode(); }
    else if (event.keyCode === 13) { commitChanges(); }    
}

$(function() {
    $("#read").bind("dblclick", enterEditMode);
    $("#edit").bind("keydown", handleKeydown).autocomplete({
        source: ["this", "that", "the other"],
        open: function(){ $("#edit").unbind("keydown", handleKeydown); },
        close: function(){ $("#edit").bind("keydown", handleKeydown); }
    });
});

Рабочий jsfiddle здесь .

2 голосов
/ 07 декабря 2010

Вы можете использовать события выбора и закрытия, чтобы снимать режим редактирования 

  close: function(event, ui) { enterEditMode()},
  select: function(event, ui) { enterEditMode()}

Вот они в вашем коде: 

function enterEditMode() {
    $("#read").hide();
    $("#edit").show().focus();
}

function exitEditMode() {
    $("#read").show();
    $("#edit").hide();
}

function commitChanges() {
    $("#read").text($("#edit").val());
    exitEditMode();
}

$(function() {
    $("#read").dblclick(enterEditMode);
    $("#edit").keydown(function(event) {
        if (event.keyCode === 27) exitEditMode();
        else if (event.keyCode === 13) commitChanges();
    }).autocomplete({
        source: ["this", "that", "the other"],
          close: function(event, ui) { enterEditMode()},
         select: function(event, ui) {  enterEditMode()}


    });
});

Рабочий пример:

http://jsfiddle.net/9unaU/6/

Обновление:

Внесено другое изменение, обеспечивающее скрытие автозаполнения при exitEditMode 

function exitEditMode() {
    $("#read").show();
    $("#edit, .autocomplete").hide();
}

Пример работы:

http://jsfiddle.net/9unaU/7/

Обновление 2: Отредактировал оператор if так, что он фиксируется, только если автозаполнение скрыто 

if (event.keyCode === 27) exitEditMode();
        else if (event.keyCode === 13 && ($('.autocomplete').is(':hidden'))) commitChanges();

Рабочий пример 2: http://jsfiddle.net/9unaU/10/

...