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 相关文章推荐
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
js实现无缝轮播图效果
Mar 09 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学习之简单计算器实现代码
2011/06/09 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python实现textrank关键词提取
2018/06/22 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
学习之星事迹材料
2014/05/17 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
追讨欠款律师函
2015/05/27 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
大学军训通讯稿
2015/07/18 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL