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事件,同时调用的程序就会被执行。

js学习笔记24----焦点事件

input 内容改变的触发事件

JS 实现 select中指定option选中触发事件(下拉框)

python中select点击option触发

js如何在页面滚动到一定位置时触发事件?