js 中对于 TextArea 的选中区域后进行处理的代码,需要的朋友可以参考下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
非 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 下则正常。 类似的,非 IE 的浏览器支持 setSelectionRange 方法指定选中的字符范围,而 IE 不支持,也是通过 TextRange 来操作, 这里需要注意的是 IE 下 Textarea 的选中区间的相对位置问题。如下面的代码是先 moveStart,moveEnd 把起点与终点都设为 0,collapse 移动生效后,起点不变,先 moveEnd 移动区间的终点,再 moveStart 移动区间的起点,在没有改变起点 point 之前, 可以保证相对位置不变,更容易理解些。 实现了选中区域获取及设置方法后,其他如文字插入,替换的实现就比较简单了。
来源: