Question

我将div设置为contenteditable，并且可以编辑div中的所有内容。现在，当我点击div时，我会自动添加一个选中的类（如果在删除之前可见，并将其添加到新选择中）我有下一个和前进按钮，所以如果我正在使用平板电脑，我可以更改我的选择或智能手机。

现在我需要帮助。

所以我选择了中间div，当我将光标移动到#dynamic-storage的另一个孩子时，我留下了删除所选课程并将其添加到新孩子的问题。选择。（不是示例中的跨度，因为它的父亲是div。我想要选择的是这个例子中的div是#dynamic-storage的孩子（例如{ {1}}）

此帖子底部提供的代码段不包含屏幕截图中提供的箭头或菜单栏以及上面的小提琴链接，因为在发布的给定时间不需要该代码。我将这篇文章的重点放在了为#dynamic-storage > div重点儿童处理.selected课程的一项任务上。

enter image description here

＆＃13;

#dynamic-storage

＆＃13;

$(document).ready(function() {
  // Select Elements
  var SelectElements = function() {
    $("#dynamic-storage").children().on("mouseup touchend", function() {
      if ( $(".selected").is(":visible") ) {
        $(".selected").removeClass("selected");
      }

      $(this).addClass("selected");
    });
  };
  // Clear Selection
  var ClearSelection = function() {
    $(".selected").removeClass("selected");
  };
  SelectElements();

  // Handles Hotkeys
  $(document).keyup(function(e) {
    // Up & Down Arrow Keys To Select/Deselect Element in Editable
    if (e.which === 38 || 40 )  {
      if ( $(".selected").is(":focus") ) {
        alert("correct");
      } else if ( $(".selected").is(":blur") ) {
        alert("incorrect");
      }
    }
  });

});

＆＃13;

/* Body */
#dynamic-storage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  outline: 0;
}

#dynamic-storage .selected {
  outline: 2px dotted #69f;
}

＆＃13;

小提琴：http://liveweave.com/uyz4VK
小提琴：http://jsbin.com/kujuxofeju/1/edit?html,js,output

Answer 1

具有属性contenteditable='true'的元素的所有内容都可以像单个 textarea中一样进行编辑。这就是移动光标时不会发生focus/blur事件的原因。在contenteditable='true'元素内的任何地方，你仍然处于相同的文本区域，不会离开或进入它。

这里的解决方案是处理类似于textarea的光标定位。

要获得表示当前选择的对象，我们使用函数：

var getSelection;
if (window.getSelection) {
    // IE 9 and non-IE
    getSelection = function() {
        var sel = window.getSelection(), ranges = [];
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
        }
        return ranges;
    };
} else if (document.selection && document.selection.createRange) {
    // IE <= 8
    getSelection = function() {
        var sel = document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };
}

然后我们需要执行下一个操作：从.selected的第一级子项中删除类#dynamic-storage，使用游标获取元素，然后沿DOM查找最接近{{1}的父项添加类#dynamic-storage：

.selected

Here is the working fiddle

Answer 2

一些事情（在你的主jQuery函数中尝试这个）：

$("#dynamic-storage").children().each(function() {
    $(this).on("focus", function() {
        $(this).addClass("selected");
    });
    $(this).on("blur", function() {
        $(this).removeClass("selected");
    });
});

但是如果您编辑内容，则会松开绑定到它们的事件处理程序......

如果子ID：焦点，则可以添加/删除类

2 个答案: