js实现⿏标点击⾃动选中点击元素内的⽂字最近需要在页⾯上实现⼀个点击元素（p、div等等）内⽂字，⽂字⾃动选中的效果，了⼀圈最后终于实现了，现总结如下：
1、如果是要选中输⼊框（input、textarea）内的⽂字，代码如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>⾃动选择⽂本框/编辑框中的⽂字</title>
<script type="text/javascript">
function selectInput(){
if (document.form1.title.focus){
document.form1.title.select();}
}html内容文本框
function selectArea(){
if (t.focus){
t.select();}
}
</script>
</head>
<body >
<form name="form1">
<input name="title" type="text" size="50" value="选中input⽂字" onClick="selectInput()">
<textarea name="content" cols="50" rows="6" onClick="selectArea()">选中textarea⽂字</textarea>
</form>
</body>
</html>
2、如果需要选中的⽂本是普通元素（div、p、span之类），代码如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>⾃动选择⽂本框/编辑框中的⽂字</title>
<script src="/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").on("click", function(){
var selection = Selection();
var range = ateRange();
range.ElementById($(this).attr('id'))); // 需要选中的dom节点
selection.addRange(range);
})
})
</script>
</head>
<body >
<div id="content">需要选中的⽂字</div>
</body>
</html>
简单解释⼀下：Selection：通过window对象获取⼀个selection对象，表⽰⽤户选择的⽂本范围或插⼊符的当前位置；
Range：表⽰⼀个包含节点与⽂本节点的⼀部分的⽂档⽚段；⽽ range.selectNodeContents(dom) 则是使range对象包含dom节点的内容
最后使⽤ selection.addRange(range);⽅法 把当前元素内的⽂字选中。
THE END~ 希望能有所帮助

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。