Question

动态创建的文本框在JQuery UI中无法编辑。使用拖放选项删除项目时添加文本框以及项目。但文本框不可编辑。文本框在Firefox中无法编辑。 Chrome工作正常。任何想法都会有很大的帮助。请分享完全填写要求的不同方法。

jsfiddle.net/dsriniudt/xxndahs2 /

Answer 1

我认为这是您正在寻找的，将来最好包含一个恰当的例子。请阅读：

对于您的问题，我们将允许在删除标签后对其进行编辑。完成后，应将其保存为标签。

工作示例：https://jsfiddle.net/Twisty/xxndahs2/6/

<强>的JavaScript

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable, .connectedSortable1"
  }).disableSelection();

  $("#sortable2").droppable({
    cancel: "#addCustomTitle",
    disabled: false,
    drop: function(e, ui) {
      // Use class 'cutomLabel' to identify labels that can be edited
      ui.draggable.addClass("customLabel");
    }
  });

  $("#sortable2").on("click", ".customLabel", function(e) {
    console.log("Click capture, opening Text Box.");
    // Capture current text
    var currentLabel = $(this).text();
    // Replace current HTML with Input field
    $(this).html($("<input>", {
      class: "entryField",
      type: "text",
      value: currentLabel
    }));
    // Set focus inside input field
    $(this).find("input").focus();
    return false;
  });

  $("#sortable2").on("blur keypress click", ".entryField", function(e) {
    console.log(e);
    switch (true) {
      case e.keyCode == $.ui.keyCode.ENTER:
      case e.keyCode == $.ui.keyCode.TAB:
      case e.originalEvent == "blur":
      case e.type == "focusout":
        console.log("Leaving field or Enter was struck, saving value.");
        // Capture value of input field
        var currentValue = $(this).val();
        // Replace HTML with text
        $(this).parent().html(currentValue);
        break;
    }
  });
});

所以你可能希望改变＆＃34;保存＆＃34;发生。您可以添加按钮，但我怀疑您正在寻找点击或导航类型模型。因此，如果用户点击 ENTER 或 TAB 或者他们点击输入，它将保存当前值。

Jquery-ui拖放。已删除的列表包含无法编辑的动态创建的文本框

1 个答案: