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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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版自动生成文章摘要
2008/07/23 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
JavaScript Split()方法
2015/12/18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python创建进程fork用法
2015/06/04 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
秦兵马俑教学反思
2014/02/07 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
给领导敬酒词
2015/08/12 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
聊一聊python常用的编程模块
2021/05/14 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL