js实现默认或者触发一个事件选中元素内容的方法
Posted 人生梦想起飞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现默认或者触发一个事件选中元素内容的方法相关的知识，希望对你有一定的参考价值。
方法一：非文本框、文本域的选中内容方法
<!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>
以上是关于js实现默认或者触发一个事件选中元素内容的方法的主要内容，如果未能解决你的问题，请参考以下文章
JS事件 内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。