jQuery 设置焦点在 div contenteditable元素上

在本文中，我们将介绍如何使用jQuery来设置焦点在div的contenteditable元素上。contenteditable属性允许用户在div中编辑和输入文本。

什么是contenteditable属性

contenteditable是HTML5中的一个属性，可以应用于可编辑元素，如div、span等。设置了contenteditable属性的元素可以被用户编辑和输入文本。通过设置contenteditable属性的值为”true”，元素就变成了可编辑元素。

以下是一个示例，展示了一个带有contenteditable属性的div元素：

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

设置焦点在contenteditable元素上

要设置焦点在div的contenteditable元素上，我们可以使用jQuery的focus()方法。

下面是一个示例代码，展示了如何使用jQuery来设置焦点在contenteditable元素上：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="editable" contenteditable="true">
      这是一个可编辑的div元素。
    </div>

    <button id="focusButton">设置焦点</button>

    <script>
       $(document).ready(function () {$ ("#focusButton").click(function () {
          $("#editable").focus();
        });
      });
    </script>
  </body>
</html>

在上面的示例中，我们首先引入了jQuery库，然后创建了一个可编辑的div元素，它的id为”editable”。接着，我们创建了一个按钮，它的id为”focusButton”。当点击按钮时，我们调用了jQuery的focus()方法，将焦点设置在可编辑的div元素上。