900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > JS鼠标点击自动选中点击元素中的文字

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

时间:2024-01-10 09:42:22

相关推荐

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

目录

1、 选中输入框(input、textarea等)中的文字2、普通标签(div、p、span等)

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,其内容会被选中

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。