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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
jquery实现页面加载效果
Feb 21 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JS定时器如何实现提交成功提示功能
Jun 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php中对2个数组相加的函数
2011/06/24 PHP
一段实用的php验证码函数
2016/05/19 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python字符串排序方法
2014/08/29 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python实现多线程网页下载器
2018/04/15 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
生产副总岗位职责
2013/11/28 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
Python实现简单的猜单词
2021/06/15 Python
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python