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
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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 加密与解密的斗争
2009/04/17 PHP
php下连接mssql2005的代码
2011/01/17 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JavaScript手风琴页面制作
2017/05/17 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python文件名和文件路径操作实例
2017/09/29 Python
浅谈Python peewee 使用经验
2017/10/20 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
大学生职业生涯规划书
2014/03/14 职场文书
学校火灾防控方案
2014/06/09 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
初中班长竞选稿
2015/11/20 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers