新浪微博插入话题后部分文字选中的js实现（控制鼠标指针位置/自动选择指定文本）

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

一、原效果预览

黄历显示今天说话不适宜卖关子，所以直接上图：



点击“话题”这个文字按钮后，在输入框文本域里面就会添加一段文字“#请在这里输入自定义话题#”，其中“请在这里输入自定义话题”处于被选中的状态，这样用户无需再选中文字，直接敲键盘就可以替换这部分内容，这是非常好的一个提高用户体验的细节。

如果您有新浪微博账号，应该对这个功能比较熟悉；如果您尚未注册新浪微博，可以点击这里注册。//zxx:我发现我好像成了新浪的托了，不行，我(不)要向新浪要广告费……

二、效果的实现

文字的选中功能是不太常用的功能，多出现在文本编辑器中，或是文本域之类的光标处理上。所以呢，使用的一些属性也并不是常见的。在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();
}

// 例：光标始终显示在输入框末尾

function setFocus(obj){
if(obj.setSelectionRange){ // IE浏览器
obj.setSelectionRange(obj.value.length, obj.value.length);
}else if(obj.createTextRange){ // 非IE浏览器
var range=obj.createTextRange();
range.collapse(true);
range.moveStart('character', obj.value.length);
range.moveEnd('character', obj.value.length);
range.select();
}
}

三、效果实例

您可以狠狠地点击这里：文本域文字部分选中实现demo

操作如下图标示：



此demo代码在页面上均有展示，代码的作用仅仅是示例，代码的效率书写等都有待改善，如果您想要封装良好的文字选择代码，请看下面一节。

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

关于文字内容的选中可以用一个方法封装起来，以便重用，由于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();
}
}
};

例如，执行

textSelect(obj, 10 30)

就意味着对名为obj的DOM对象值中的第10个到第30个字符进行选中。

您可以狠狠地点击这里：封装良好的文字选中代码测试demo

一些说明：

1. 只受用于一些含有value属性的HTML控件，例如单行文本框、多行文本域；

2. 后面两个参数表示起始字符位置与结束的字符位置，如果位置值为空，或是非数值，则会（从头或至尾或全部）选择字符；

3. 支持负值，负值表意与js中的slice属性一致，负值表示的含义就是负值与字符总长度的和，也可以理解为从末尾开始选择；

4. 如果数值范围超过字符总长，则无内容选择；

5. 支持单参数，省略第三个参数表示一致到字符结束都要选中。

五、结语

小小效果有大大学问，其他我就不多说了，希望能对您的学习有所帮助。

======================================================================================================

示例：http://www.zhangxinxu.com/study/201004/textarea-text-select-demo.html

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