js TextArea的选中区域处理

（一）获取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
　　　}

实现了选中区域获取及设置方法后，其他如文字插入，替换的实现就比较简单了。

赞 (0)

相关推荐

  • javascript textarea光标定位方法(兼容IE和FF)

    今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的. 于是搜索了baidu,google,找到了 IE下面的方法 复制代码 代码如下: var tea=document.getElementById("文本框的ID"); var txt=textArea.crea

  • js操作textarea方法集合封装(兼容IE,firefox)

    注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. 完整测试代码: 复制代码 代码如下: <textarea id="testlujun" style="width: 300px; height: 50px;">abcdefghijklmnopqrstuvwxyz</textarea><br /><input onclick=&q

  • 新浪微博字数统计 textarea字数统计实现代码

    复制代码 代码如下: /* * 从新浪微博上抄的 * */ var getLength = (function(){ var trim = function(h) { try { return h.replace(/^\s+|\s+$/g, "") } catch(j) { return h } } var byteLength = function(b) { if (typeof b == "undefined") { return 0 } var a = b.m

  • js封装的textarea操作方法集合(兼容很好)

    虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家,测试过IE6,8, firefox ,chrome, opera , safari.兼容没问题. 注意:在firefox下 添加字符串的时候有个bug 就是scrollTop 会等于0,当然解决了,但是不够完美.如果有高手也研究过,麻烦指点下. 复制代码 代码如下: var TT = { /* * 获取光标位置 * @Method get

  • 用javascript获取textarea中的光标位置

    对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法.昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧. var start=0;     var end=0;     function add(){                var textBox = document.getElementById("ta"

  • javascript实现的textarea运行框效果代码 不用指定id批量指定

    刚学了点DOM节点树的操作方法和属性,边尝试着写一个不用手动设置id和双击事件的例子,折腾了N久终于弄出了摸样来了,代码如下:(说明:双击运行文本框里的代码,右击复制其内的代码,另存为*.htm文件即可测试) textarea运行框效果 textarea {width:100%;height:200px;font-family:"fixedsys";overflow-y:hidden;} /************************************************

  • 在textarea文本域中显示HTML代码的方法

    这是一个iframe 的 给你一个参考的: 复制代码 代码如下: <iframe ID="tryit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="300" scrolling="auto"></iframe>      <script language=javascript>     

  • 关于textarea的直观换行的一些研究材料

    前两天研究了一下textarea的直观行的换行规律,挺复杂啊: 直观行怎样取不光要看cols大小,还要看网页编码方式. cols="30"的textarea,实际上每行可以容纳29个半角字符,多少个全角字符就不一定了,与网页编码方式有关. 在IE6.0实测的情况,直观行的换行发生在红字处(红字折到下一行). dddddddddddd米ddddddddddddddddddddd //全角后面的连续半角内容被当成一个完整单词处理,如果剩下的位置容不下单词的长度了,就要换行,此为特殊规律A

  • 动态调整textarea中字体的大小代码

    选择阅读字体 for (i=9;i"+i+"pt字体\n");} function NYSfont() {if((fontslt.selectedIndex!=-1)&&(fontslt.selectedIndex!=0)){readcontent.style.fontSize=fontslt.options[fontslt.selectedIndex].value;}} 欢迎光临我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript 监听textarea中按键事件

    有个textarea, Java代码 复制代码 代码如下: <textarea id="text"></textarea> 经常会定义onKeyPress="keypress();",并定义以下方法. 复制代码 代码如下: var keypress = function(e){ var e = e || window.event; var k = e.keyCode; } 这里我使用的办法是JQuery. 复制代码 代码如下: $("

  • 在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法

    在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法

    特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能,如下图所示: input[text]: textarea: 有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下: 取消表单项聚焦时产生的黄色边框: 复制代码 代码如下: input,button,select,textarea{ou

  • JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

  • javascript之textarea打字机效果提示代码推荐

    比较不错的应用 function $(id){return document.getElementById(id);} var msgall="一个专业的收藏精品脚本学习资料的网站,修正错误,努力打造精品脚本学习站,我们将会为大家附上游戏脚本资源,源码,软件等信息" var msg = "输入问题内容,点击"我要提问"." ; var interval = 100 var spacelen = 100; var space10=" &q

  • 非主流的textarea自增长实现js代码

    其中大部分是靠scrollHeight(非W3C标准,由IE引入),keyup事件来完成.有一种比较有意思的是 通过"镜像元素(mirror element)", 和setTimeout轮询实现.大致的实现思路如下: 把一个单独的pre元素,通过position:absolute的方式定位于client view之外,并且把它和textarea的样式设置的一样,我们把这个pre元素称为"mirror",然后通过setTimeout进行200ms的轮询,把textar

  • 让textarea自动调整大小的js代码

    复制代码 代码如下: <!doctype html> <html> <head> <title>自动调整大小的textarea </title> <meta charset = "utf-8" /> <style type = "text/css"> .editable{cursor:text; font-size:13px; color:#003366;width:80px;lin

  • Textarea与懒惰渲染实现代码

    代码如下. 复制代码 代码如下: <div> 立即渲染内容 <ul> <li>张三<img src="p01.jpg"/></li> <li>张四<img src="p02.jpg"/></li> </ul> </div> <div> <textarea id="lazyRender01" style=&quo

  • textarea支持图形编辑的实现方法

    代码 New Document 我的logo: var editor = document.getElementById('editor'); var img = document.createElement('img'); img.src = 'http://onewww.net/images/logo.jpg'; editor.appendChild(img); alert(editor.innerHTML); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS TextArea字符串长度限制代码集合

    复制代码 代码如下: <html> <body> <textarea id="t"></textarea> <input type="text" id="b2" /> <script type="text/javascript"> textAreaLimit("t",{lastMsgLabel:"b2"}) func

随机推荐