首页 > web前端 > js教程 > 正文

js TextArea的选中区域处理_javascript技巧

php中文网
发布: 2016-05-16 18:13:11
原创
1618人浏览过
(一)获取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) 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
   }

实现了选中区域获取及设置方法后,其他如文字插入,替换的实现就比较简单了。
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号