📌  相关文章
📜  HTML | DOM contentEditable 属性(1)

📅  最后修改于: 2023-12-03 15:31:11.746000             🧑  作者: Mango

HTML | DOM contentEditable 属性

介绍

在HTML中，可以使用contentEditable属性来指定页面元素是否可以编辑。该属性可以设置为“true”或“false”，表示该元素是否可编辑。当属性设置为“true”时，用户可以在该元素中输入文本或编辑现有文本。

语法
<div contenteditable="true|false"></div>

在上面的示例中，我们将“contenteditable”属性设置为“true”以启用编辑模式。我们可以用“false”来禁用它。

示例

下面是一个简单的例子，说明如何使用contentEditable属性：

<!DOCTYPE html>
<html>
  <head>
    <title>contentEditable示例</title>
  </head>
  <body>
    <div contenteditable="true">这是一个可以编辑的元素！</div>  
  </body>
</html>
属性方法
绑定事件

我们可以使用JavaScript绑定事件来监听contentEditable的各种事件，例如用户输入文本或执行撤销操作。

下面是一个例子，说明如何使用JavaScript绑定内容可编辑的事件：

<!DOCTYPE html>
<html>
  <head>
    <title>contentEditable示例</title>
  </head>
  <body>
    <div contenteditable="true">这是一个可以编辑的元素！</div>  
  </body>
  <script>
    document.querySelector('div').addEventListener('input', (event) => {
      console.log(event.target.innerText);
    });
  </script>
</html>

在上面的示例中，我们使用了input事件监听编辑状态。当用户输入文本时，我们将事件处理程序绑定到div元素上，以便我们可以访问用户输入的数据。在示例中，我们将此数据记录在浏览器控制台中以供检查。

更多事件可以参考以下链接：

参考链接 - contentEditable事件

设置光标位置

通过JavaScript，我们可以在contentEditable元素中设置光标位置。

下面是一个例子，说明如何使用JavaScript设置内容可编辑元素中的光标位置：

<!DOCTYPE html>
<html>
  <head>
    <title>contentEditable示例</title>
  </head>
  <body>
    <div contenteditable="true">这是一个可以编辑的元素！</div>  
  </body>
  <script>
    const div = document.querySelector("div");
    div.focus();
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(div);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
  </script>
</html>

在上面的示例中，我们使用了window.getSelection()方法与document.createRange()方法来创建一个新的Range对象。该Range对象可以操作文档中的选中文本，并控制光标在contentEditable元素中的位置。

总结

contentEditable属性允许我们在HTML文档中创建可编辑的元素。我们可以使用JavaScript绑定事件来监听用户输入和撤销操作。我们还可以使用JavaScript来控制光标的位置，以便我们可以更好地控制用户输入的位置。