WEB开发网
开发学院网页设计JavaScript javascript获取textarea光标选择位置和内容方法(I... 阅读

javascript获取textarea光标选择位置和内容方法(IE, Firefox)

 2008-11-24 20:01:55 来源:WEB开发网   
核心提示: 在网上用baidu找了很久,找到的都是IE的方法,javascript获取textarea光标选择位置和内容方法(IE, Firefox),Firefox都不能用, 而且很多要用到<textarea>.focus()方法,则 //返回小于0的值,则range_all往右移一点,用起来很不方便, 后来

   在网上用baidu找了很久,找到的都是IE的方法,Firefox都不能用。 而且很多要用到<textarea>.focus()方法,用起来很不方便。
   后来转用Google,搜了下"textarea cursor",第一个就有好方法。我根据最后一个家伙的comments,写了一个sample,应该还是挺好用的。
原文地址:http://weblogs.asp.net/skillet/archive/2005/03/24/395838.aspx

<html>
<head>
<title>TEST</title>
<style>
body,td{
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 12px;
}
</style>
<script type="text/javascript">
   var start=0;
   var end=0;
   function add(){    
     var textBox = document.getElementById("ta");
     var PRe = textBox.value.substr(0, start);
     var post = textBox.value.substr(end);
     textBox.value = pre + document.getElementById("inputtext").value + post;
   }
   function savePos(textBox){
     //如果是Firefox(1.5)的话,方法很简单
     if(typeof(textBox.selectionStart) == "number"){
       start = textBox.selectionStart;
       end = textBox.selectionEnd;
     }
     //下面是IE(6.0)的方法,麻烦得很,还要计算上'\n'
     else if(document.selection){
       var range = document.selection.createRange();
       if(range.parentElement().id == textBox.id){
         // create a selection of the whole textarea
         var range_all = document.body.createTextRange();
         range_all.moveToElementText(textBox);
         //两个range,一个是已经选择的text(range),一个是整个textarea(range_all)
         //range_all.compareEndPoints()比较两个端点,如果range_all比range更往左(further to the left),则         //返回小于0的值,则range_all往右移一点,直到两个range的start相同。
         // calculate selection start point by moving beginning of range_all to beginning of range
         for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
           range_all.moveStart('character', 1);
         // get number of line breaks from textarea start to selection start and add them to start
         // 计算一下\n
         for (var i = 0; i <= start; i ++){
           if (textBox.value.charAt(i) == '\n')
             start++;
         }
         // create a selection of the whole textarea
         var range_all = document.body.createTextRange();
         range_all.moveToElementText(textBox);
         // calculate selection end point by moving beginning of range_all to end of range
         for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
           range_all.moveStart('character', 1);
           // get number of line breaks from textarea start to selection end and add them to end
           for (var i = 0; i <= end; i ++){
             if (textBox.value.charAt(i) == '\n')
               end ++;
           }
         }
       }
     document.getElementById("start").value = start;
     document.getElementById("end").value = end;
   }
</script>
</head>
<body>
<form action="a.cgi">
<table border="1" cellspacing="0" cellpadding="0">
   <tr>
     <td>start: <input type="text" id="start" size="3"/></td>
     <td>end: <input type="text" id="end" size="3"/></td>
   </tr>
   <tr>
     <td colspan="2">
       <textarea id="ta"
                onKeyup="savePos(this)"
               
               
               
                rows="14" cols="50"></textarea>
     </td>
   </tr>
   <tr>
     <td><input type="text" id="inputtext" /></td>
     <td><input type="button" value="Add Text"/></td>
   </tr>
</table>
</form>
</body>
</html>

Tags:javascript 获取 textarea

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接