HTML 如何检测通过键盘编辑 contenteditable DIV 的子元素

在本文中，我们将介绍如何使用 HTML 监听事件来检测当 contenteditable DIV 的子元素通过键盘进行编辑的情况。contenteditable 是一个 HTML 属性，可以使元素变为可编辑状态，允许用户通过键盘或其他输入设备来编辑元素内的内容。

阅读更多：HTML 教程

了解 contenteditable 属性

在开始之前，让我们先了解一下 contenteditable 属性。这个属性可以用于块级元素和行内元素，属性值可以是 “true” 或 “false”。当属性值为 “true” 时，元素将成为可编辑状态，允许用户编辑其中的内容。

<div contenteditable="true">
  这是一个可编辑的 DIV 元素。
</div>

监听键盘事件

为了在子元素通过键盘编辑时进行检测，我们需要使用 JavaScript 来添加事件监听器来监听键盘事件。

首先，我们需要获取到包含 contenteditable DIV 的父元素，并为它添加一个键盘事件监听器。

<div id="parent" contenteditable="true">
  <p>子元素 1</p>
  <p>子元素 2</p>
  <p>子元素 3</p>
</div>

<script>
  var parent = document.getElementById('parent');
  parent.addEventListener('keydown', function(event) {
    // 处理键盘事件
  });
</script>

接下来，我们可以在事件处理函数中添加逻辑来检查是否有子元素通过键盘进行了编辑。这可以通过检查 event 对象的 target 属性来完成，target 属性表示触发事件的元素。

<div id="parent" contenteditable="true">
  <p>子元素 1</p>
  <p>子元素 2</p>
  <p>子元素 3</p>
</div>

<script>
  var parent = document.getElementById('parent');
  parent.addEventListener('keydown', function(event) {
    var editedElement = event.target;
    // 检测到子元素编辑
  });
</script>

上面的示例代码中，当用户通过键盘编辑子元素时，事件处理函数会获取到被编辑的子元素。

示例：高亮被编辑的子元素

在实际应用中，我们可能会希望在子元素被编辑时对其进行一些特殊的反应，例如高亮被编辑的子元素。

下面是一个示例，在键盘编辑子元素时，会将被编辑的子元素的背景颜色设为黄色。

<style>
  .highlight {
    background-color: yellow;
  }
</style>

<div id="parent" contenteditable="true">
  <p>子元素 1</p>
  <p>子元素 2</p>
  <p>子元素 3</p>
</div>

<script>
  var parent = document.getElementById('parent');
  parent.addEventListener('keydown', function(event) {
    var editedElement = event.target;
    editedElement.classList.add('highlight');
  });
</script>

在上面的示例中，我们使用了 CSS 的类选择器来给被编辑的子元素添加了一个名为 “highlight” 的类，该类定义了背景颜色为黄色。在事件处理函数中，我们使用 classList.add() 方法将该类添加到被编辑的子元素中，从而实现了高亮的效果。