js TextArea的选中区域处理


Posted in Javascript onDecember 28, 2010

(一)获取Textarea的选中区域起点或无选中时的输入光标位置

非IE浏览器,如,firefox,chrome,支持 selectionStart 获取选中区域的起点,而IE浏览器不支持该属性,需要间接通过TextRange来获得,利用TextRange对象的compareEndPoints方法来进行起点的比较可以实现。

getStartPos : function( textarea ) 
{ 
if ( typeof textarea.selectionStart != 'undefined' ) 
{ // 非IE 
start = textarea.selectionStart; 
} 
else 
{ // IE 
var range = document.selection.createRange(); 
var range_textarea = document.body.createTextRange(); 
range_textarea .moveToElementText(textarea); 
//比较start point 
for ( var sel_start = 0; range_textarea .compareEndPoints('StartToStart' , range) < 0; sel_start++) 
range_textarea .moveStart( 'character', 1); 
start = sel_start; 
} // else return start; 
}

但有点需要注意的是,在chrome下,如果textarea设为readonley,那textarea不会出现输入光标,返回的selectionStart与selectionEnd都为0.firefox下则正常。

(二)设置Textarea中选中的区域

类似的,非IE的浏览器支持setSelectionRange方法指定选中的字符范围,而IE不支持,也是通过TextRange来操作,这里需要注意的是IE下Textarea的选中区间的相对位置问题。如下面的代码是先moveStart,moveEnd把起点与终点都设为0,collapse移动生效后,起点不变,先moveEnd移动区间的终点,再moveStart移动区间的起点,在没有改变起点point之前,可以保证相对位置不变,更容易理解些。

/** 
* 设置textarea的选中区域 
*/ 
setSelectRange : function( textarea, start, end ) 
{ 
if ( typeof textarea.createTextRange != 'undefined' )// IE 
{ 
var range = textarea.createTextRange(); 
// 先把相对起点移动到0处 
range.moveStart( "character", 0) 
range.moveEnd( "character", 0); 
range.collapse( true); // 移动插入光标到start处 
range.moveEnd( "character", end); 
range.moveStart( "character", start); 
range.select(); 
} // if 
else if ( typeof textarea.setSelectionRange != 'undefined' ) 
 { 

 textarea.setSelectionRange(start, end); 

 textarea.focus(); 
 } // else 

 }

实现了选中区域获取及设置方法后,其他如文字插入,替换的实现就比较简单了。
Javascript 相关文章推荐
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 #Javascript
JS date对象的减法处理实现代码
Dec 28 #Javascript
javascript中检测变量的类型的代码
Dec 28 #Javascript
javascript中的作用域scope介绍
Dec 28 #Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 #Javascript
按给定几率进行随机抽取的js代码
Dec 28 #Javascript
围观tangram js库
Dec 28 #Javascript
You might like
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python显示天气预报
2014/03/02 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python装饰器用法实例总结
2018/02/07 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
工地资料员岗位职责
2013/12/31 职场文书
安全生产承诺书
2014/03/26 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
毕业证明书
2015/06/19 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
数据库连接池
2021/04/06 MySQL