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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
JS排序之选择排序详解
Apr 08 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
如何使用脚本模仿登陆过程
2006/11/22 PHP
Snoopy类使用小例子
2008/04/15 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
thinkphp分页集成实例
2017/07/24 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python入门教程之识别验证码
2017/03/04 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
Python初学者常见错误详解
2019/07/02 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Python网络编程之ZeroMQ知识总结
2021/04/25 Python