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就是选准的效果】

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

这个是在非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的应用。