如何在HTML元素内实现点击自动选中div内容？

可以直接在div的onclick属性中编写代码实现点击选中文本，无需添加class或单独绑定事件监听。下面提供两种可行的实现方式：

方式一：直接在onclick中编写完整逻辑 #

这种方式不需要额外的script函数，所有逻辑直接写在元素的onclick属性里：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点击选中文本</title>
</head>
<body>
  <div onclick="
    const range = document.createRange();
    range.selectNode(this);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  ">点击我选中这段文本</div>
  
  <div onclick="
    const range = document.createRange();
    range.selectNode(this);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  ">点击我选中另一段文本</div>
</body>
</html>

关键逻辑说明： #

• this：在inline事件处理中，this指向当前触发点击事件的div元素
• document.createRange()：创建一个用于选择文档内容的范围对象
• range.selectNode(this)：将范围设置为包含当前div的全部内容（包括文本和子元素）
• window.getSelection().removeAllRanges()：清除页面上已有的选中范围，避免出现多个选区冲突
• window.getSelection().addRange(range)：将创建好的范围添加到选区，完成文本选中操作

方式二：封装函数复用代码 #

如果有多个需要实现该功能的div，将选中逻辑封装成函数可以让代码更简洁易维护，只需在onclick中调用函数并传入当前元素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点击选中文本</title>
  <script>
    function selectElementText(el) {
      const range = document.createRange();
      range.selectNode(el);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  </script>
</head>
<body>
  <div onclick="selectElementText(this)">点击我选中这段文本</div>
  <div onclick="selectElementText(this)">点击我选中另一段文本</div>
  <div onclick="selectElementText(this)">点击我选中第三段文本</div>
</body>
</html>

这种方式既避免了重复编写相同代码，也不需要给div添加class，完全符合需求。

内容的提问来源于stack exchange，提问作者Kasandra Min