最近需要在页面上实现一个点击元素（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();}}function selectArea(){if (document.form1.content.focus){document.form1.content.select();}}</script></head><body style="font-size:12px"><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>
原版地址： /article/71317.htm
具体原理不清楚，需要的同学可以直接把代码粘到（菜鸟教程在线编辑器：/try/try.php?filename=tryjs_events）进行测试。注意点是：form表单需要对name属性赋值，需要选中的元素也要对name属性赋值
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 = window.getSelection(); selection.removeAllRanges();var range = document.createRange();range.selectNodeContents(document.getElementById($(this).attr('id'))); // 需要选中的dom节点selection.addRange(range);})})</script></head><body style="font-size:12px"><div id="content">需要选中的文字</div></body></html>
参考链接：/en-US/docs/Web/API/Range/selectNodeContents
需要的同学可以直接把代码粘到（菜鸟教程在线编辑器： /try/try.php?filename=tryjs_events）进行测试。
简单解释一下：Selection：通过window对象获取一个selection对象，表示用户选择的文本范围或插入符的当前位置；
Range：表示一个包含节点与文本节点的一部分的文档片段；而 range.selectNodeContents(dom) 则是使range对象包含dom节点的内容
最后使用 selection.addRange(range);方法 把当前元素内的文字选中。
THE END~ 希望能有所帮助
