关于浏览器默认选择div内容记录

关于浏览器默认选择div内容记录
项目遇到这么一个问题,需要按快捷键切换选中内容大小写,发现切换一次后,选择内容丢失,随即开始研究怎么让它切换后再次选择。一开始发现大神写的代码。

html代码

<textarea id="t" style="width:500px; height:100px;">麦当劳wifi热点的账号密码及连接设置(全国通用)。麦当劳的免费热点是隐藏wifi,需要手动添加才行。 麦当劳的wifi账号:McDonald-OC wifi密码:Ac28Idfjla92ifjsl3jsHdowIo</textarea>
<p>输入起始值:<input type="text" id="a" /> 输入结束值:<input type="text" id="b" /></p>
<p><button id="btn">执行</button></p>

JS代码

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();
        }
    }
};
var $ = function(id){
    return document.getElementById(id);
};
$("btn").onclick = function(){
    var a = $("a").value;
    var b = $("b").value;
    textSelect($("t"), a, b);
};
使用后,测试成功,但是发现一个问题,这个方法只在textarea好使,而我们项目需求的是可编辑的DIV,属性:contenteditable="true"。在div里,这个方法就不好使了,随之后继续研究。根据别人的方法,修改,最后发现如下方法可以使用,特此记录。
$("btn").onclick = function() {
        var a = $("a").value;
        var b = $("b").value;
        var o = document.getElementById("t")
        selectNodeText(o, a, b);
    };
    function selectNodeText(o,a,b){
        el=o;
        el.focus();
        var range = document.createRange();
        var textNode = el.firstChild;
        range.selectNodeContents(el);
        range.collapse(false);
        range.setStart(textNode,a);
        range.setEnd(textNode,b);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值