原效果预览

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

二、效果的实现

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

　　

三、效果实例

您可以狠狠地点击这里：

 

本文转载自：