createTextRange firefox 兼容

最新推荐文章于 2022-03-09 16:05:40 发布

转载最新推荐文章于 2022-03-09 16:05:40 发布 · 5.3k 阅读

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在不同浏览器（如IE与非IE浏览器）中实现文本内容的精确选中功能，通过使用createTextRange与setSelectionRange方法，并提供了一个实用的封装函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字的选中功能是不太常用的功能，多出现在文本编辑器中，或是文本域之类的光标处理上。所以呢，使用的一些属性也并不是常见的。在IE浏览器下使用的是createTextRange而Firefox/chrome等现代浏览器下使用的是setSelectionRange。

假设文本域对象的名称是obj，则在IE及非IE浏览器下实现指定文字选中的代码如下：

IE浏览器下：

var range = obj.createTextRange();

range.moveStart("character", 开始序号);

range.moveEnd("character", 结束序号);

range.select();

非IE浏览器下：

obj.setSelectionRange(开始序号, 结束序号);

obj.focus();

所以，为了在各个浏览器下都能实现效果，我们需要将上面的两段代码组合一下，结果如下：

if(obj.createTextRange){//IE浏览器

var range = obj.createTextRange();

range.moveEnd("character",结束序号);

range.moveStart("character", 起始序号);

range.select(); }else{//非IE浏览器

obj.setSelectionRange(起始序号, 结束序号);

obj.focus(); }

code

<style type="text/css">
textarea{font-size:1em; width:500px; height:100px;}
</style>
</head>
<body>
<textarea id="target"></textarea>
<p><button id="btn">插入话题</button></p>
<script>
var $ = function(id){return document.getElementById(id);};
$("btn").onclick = function(){
    var con = "请在这里输入自定义话题";
    //转载文字
    $("target").value += "#"+con+"#";
    var l = $("target").value.length;
    //创建选择区域    
    if($("target").createTextRange){//IE浏览器
        var range = $("target").createTextRange();
        range.moveEnd("character",-l)         
        //range.moveStart("character",-l)              
        range.moveEnd("character",l-1);
        range.moveStart("character", l-1-con.length);
        range.select();
    }else{
        $("target").setSelectionRange(l-1-con.length,l-1);
        $("target").focus();
    }
};
</script>

文字内容部分选中的代码封装

关于文字内容的选中可以用一个方法封装起来，以便重用，由于IE不支持DOM leave3，所以Object.prototype不受用于DOM对象，所以这里的方法还是比较传统的，如下代码：

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();
        }
    }
};