Question

我有一组字段。在读取模式下，它们在表格单元格中显示为文本。双击单元格将记录置于编辑模式。在编辑模式下按“enter”将提交更改。在编辑模式下按“esc”将返回读取模式而不更改数据。

现在，每个字段都添加了jQuery UI自动完成控件。 当自动完成菜单可见时，我希望“enter”的行为与通常用于自动完成的行为一样（用所选菜单值替换输入中的值并关闭自动完成菜单）不带< / strong>提交更改/返回编辑模式。当按下escape时，如果菜单打开，执行常用的自动完成功能（将编辑字段返回到其先前的值并关闭菜单），不用返回读取模式。

我已经展示了我的问题here。目前，如果您在其中一个自动完成菜单项上按“输入”，则自动完成会执行其操作并立即提交更改。按退出将关闭自动完成菜单并取消编辑模式。

Answer 1

使用自动填充的打开和关闭事件取消绑定/重新绑定自定义行为，以便仅在自动完成菜单未打开时才会发生。这将使事件不会混淆。我的工作代码如下：

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是here。

Answer 2

您可以使用选择和关闭事件来修改编辑模式

  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/

在jquery自动完成控件上按下escape

2 个答案: