设置文本输入框光标位置，兼容ie，w3c

原效果预览

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

二、效果的实现

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

　　

三、效果实例

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

 

本文转载自： http://www.zhangxinxu.com/wordpress/2010/04/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E6%8F%92%E5%85%A5%E8%AF%9D%E9%A2%98%E5%90%8E%E9%83%A8%E5%88%86%E6%96%87%E5%AD%97%E9%80%89%E4%B8%AD%E7%9A%84js%E5%AE%9E%E7%8E%B0/

转载于:https://www.cnblogs.com/woshiyinmo/p/3393949.html