JS鼠标点击自动选中点击元素中的文字

1、 选中输入框（input、textarea等）中的文字

<form action="" name="form1">
  <input class="input" name="input1" type="text" value="我是input的内容" />
</form>

<script>
  var input = document.querySelector(".input");
  input.onclick = function () {
    if (document.form1.input1.focus) {
      document.form1.input1.select();
    }
  };
</script>

注意：form和input都要加上name属性，这样可以通过document.form1.input1直接得到input元素。

结果：点击input框会自动选中input框中的文字

2、普通标签（div、p、span等）

<div class="div">我是div中的元素</div>

<script>
var div = document.querySelector(".div");
  div.onclick = function () {
    var selection = window.getSelection();
    selection.removeAllRanges();
    var range = document.createRange();
    range.selectNodeContents(div.firstChild);
    selection.addRange(range);
  };
</script>

1、window.getSelection() 表示 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。

2、selection.removeAllRanges(); 表示 将所有的区域都从选区中移除。

3、document.createRange(); 表示 返回一个 Range 对象。Range 接口表示一个包含节点与文本节点的一部分的文档片段。

4、range.selectNodeContents 表示 使 Range 包含某个节点的内容。()中写需要选中的dom节点。

5、selection.addRange() 表示 一个区域（Range）对象将被加入选区。

结果：点击div，其内容会被选中