javascript - Pressing escape on a jquery autocomplete control

I have a set of fields. In read mode, they display as text within a table cell. Double clicking the cell puts the record in edit mode. Pressing "enter" while in edit mode mits the change. Pressing "esc" in edit mode returns to read mode without changing the data.

Now, each field has a jQuery UI autoplete control added. When the autoplete menu is visible, I want "enter" to behave as it normally does for autoplete (replace the value in the input with the selected menu value and close the autoplete menu) without miting the change/returning to edit mode. And when pressing escape, if the menu is open, perform the usual autoplete functions (return the edit field to its previous value and close the menu) without returning to read mode.

I have placed a demo of my problem here. Currently, if you press "enter" on one of the autoplete menu items, autoplete does its thing AND the changes are mitted immediately. Pressing escape closes the autoplete menu AND cancels edit mode.

Share Improve this question edited Dec 8, 2010 at 18:14 asked Dec 7, 2010 at 19:03 Joel Harris 1,9663 gold badges21 silver badges34 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

Use the open and close events of the autoplete to unbind/rebind your custom behavior so that it occurs only when the autoplete menu is not open. This will keep the events from getting confused. My working code follows:

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 mitChanges() {
    $("#output").append("<div>mit</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) { mitChanges(); }    
}

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

The working jsfiddle is here.

You can use the select and close events to renter edit mode

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

Here they are in your code:

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

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

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

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


    });
});

Working Example:

http://jsfiddle/9unaU/6/

Update:

Made another change to ensure autoplete is hidden on exitEditMode

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

Working Example:

http://jsfiddle/9unaU/7/

Update 2: Edited the if statement so it only mits if the autoplete is hidden

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

Working Example 2: http://jsfiddle/9unaU/10/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Pressing escape on a jquery autocomplete control - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)