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,其内容会被选中
在这里插入图片描述

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值