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