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 相关文章推荐
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JavaScript对象学习小结
Sep 02 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
Javascript Web Worker使用过程解析
Mar 16 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
validator验证控件使用代码
2010/11/23 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
原生JS轮播图插件
2017/02/09 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python实现udp传输图片功能
2020/03/20 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
python中time包实例详解
2021/02/02 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
聚美优品励志广告词
2014/03/14 职场文书
团队会宣传标语
2014/10/09 职场文书
博物馆观后感
2015/06/05 职场文书
纪检监察立案决定书
2015/06/24 职场文书
红与黑读书笔记
2015/06/29 职场文书
保姆聘用合同
2015/09/21 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
如何有效防止sql注入的方法
2021/05/25 SQL Server
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python