IFrame 系列3 ---- js選中文字API: setSelectionRange跟createTextRange

在 iframe編輯器或者其他輸入框中都會涉及到編輯選中文字的功能，需要用腳本來控制選準文字的區域進行操作[CRUD 的操作]，在一般的場景中使用的比較少，所以呢，使用的一些屬性也並不是常見的。在IE瀏覽器下使用的是createTextRange而Firefox/chrome等現代瀏覽器下使用的是setSelectionRange。

ps:  親測，這兩個api在iframe中不能實現。

、// ie下實現就會出現文字全部選準的效果
var obj = document.getElementById('target');
var range = obj.createTextRange();
range.moveStart("character", 0);
range.moveEnd("character", obj.value.length );
range.select();

在線案例 【在非現代瀏覽器下面進入以後案例1就是選準的效果】

這個是在非IE瀏覽器中實現的效果

if(obj.createTextRange){//IE瀏覽器
var range = obj.createTextRange();
range.moveEnd("character",結束序號);
range.moveStart("character", 起始序號);
range.select();
}else{//非IE瀏覽器
obj.setSelectionRange(起始序號, 結束序號);
obj.focus();
}

整合代碼如上所示。

再進一步的封裝如下：

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

本文原創來源：地址 

閱讀完本文，其實本文只是冰山一角的介紹了這兩個API，這兩個API應該找到真正的歸宿，從哪裏來又到那裏去，就怕莫名其妙的api，因此強迫症患者強烈建議閱讀  document.selection  全方位解析，可以更加透徹的理解這個兩個API的應用。