文字的选中功能是不太常用的功能,多出现在文本编辑器中,或是文本域之类的光标处理上。所以呢,使用的一些属性也并不是常见的。在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();
}
实现:
代码
CSS代码:
textarea{font-size:1em; width:500px; height:100px;}
HTML代码:
<textarea id="target"></textarea>
<p><button id="btn">插入话题</button></p>
JS代码:
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();
}
};
假设文本域对象的名称是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();
}
实现:
代码
CSS代码:
textarea{font-size:1em; width:500px; height:100px;}
HTML代码:
<textarea id="target"></textarea>
<p><button id="btn">插入话题</button></p>
JS代码:
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();
}
};