方法一:非文本框、文本域的选中内容方法
<!Doctype html> <html> <head> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script> <body> <div onclick="SelectText('myDiv')">点击选中</div> <div id="myDiv"> 测试选中内容<p>eee</p> 测试 </div> <script> function SelectText(element) { var browserName=navigator.userAgent.toLowerCase(); var text = document.getElementById(element); if (/msie/i.test(browserName) && !/opera/.test(browserName)) { var range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else { var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); //苹果浏览器下,现已经不支持html的内容 // var selection = window.getSelection(); // selection.setBaseAndExtent(text, 0, text, 1); } } </script> </body> </html>
方法二:文本区、文本框选中内容方法(文本域和文本框与其他html标签选中的方法不一样)
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选中文本</title> <style type="text/css"> body{ font-size:12px;} </style> </head> <body> <input type="text" id="song" value="在解放路松岛枫424" /> </body> </html> <script> /* 1. 只受用于一些含有value属性的HTML控件,例如单行文本框、多行文本域; 2. 后面两个参数表示起始字符位置与结束的字符位置,如果位置值为空,或是非数值,则会(从头或至尾或全部)选择字符; 3. 支持负值,负值表意与js中的slice属性一致,负值表示的含义就是负值与字符总长度的和,也可以理解为从末尾开始选择; 4. 如果数值范围超过字符总长,则无内容选择; 5. 支持单参数,省略第三个参数表示一致到字符结束都要选中。 */ var textSelect = function(o, a, b){ //o是当前对象,例如文本域对象 //a是起始位置,b是终点位置 var a = parseInt(a, 10), b = parseInt(b, 10); var l = o.value.length; if(l){ //如果非数值,则表示从起始位置选择到结束位置 if(!a){ a = 0; } if(!b){ b = l; } //如果值超过长度,则就是当前对象值的长度 if(a > l){ a = l; } if(b > l){ b = l; } //如果为负值,则与长度值相加 if(a < 0){ a = l + a; } if(b < 0){ b = l + b; } if(o.createTextRange){//IE浏览器 var range = o.createTextRange(); range.moveStart("character",-l); range.moveEnd("character",-l); range.moveStart("character", a); range.moveEnd("character",b); range.select(); }else{ o.setSelectionRange(a, b); o.focus(); } } }; document.onclick = function(){ var textElem = document.getElementById("song"); textSelect(textElem, 0, 5); } </script>