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操作select option 的代码小结
Jun 21 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
js面试题之异步问题的深入理解
Sep 20 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
详解django中Template语言
2020/02/22 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
行政助理岗位职责
2013/11/10 职场文书
五四演讲稿范文
2014/09/03 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
表扬信范文
2019/04/22 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Mysql 用户权限管理实现
2021/05/25 MySQL