• 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>
    

      

  • 相关阅读:
    【UNIX环境高级编程】线程同步
    死锁
    Shell Script的默认变量
    高通平台读写nv总结
    PLMN概念和应用设置
    win10间歇性的找不到usb设备
    (转)查询或修改iPhone的短信服务中心号码(iOS通用)
    (转)CS域和PS域
    SSL&HTTPS简单介绍
    WAV和PCM的关系和区别
  • 原文地址:https://www.cnblogs.com/dearxinli/p/6913961.html
Copyright © 2020-2023  润新知