我的textarea点击一下,写字的光标就在中间部位,怎么把光标移到前面去?

 我来答
破晓0612
推荐于2019-08-04 · TA获得超过1.1万个赞
知道小有建树答主
回答量:96
采纳率:100%
帮助的人:2.3万
展开全部

Javascript设置和获取Textarea的光标位置的方法,可定位光标到某个位置:

  • 效果如图:


  • 源码:

<html><head>  
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JS设置及获取Textarea的光标位置</title>  
 <script>  
   var isIE = !(!document.all);  
   function posCursor(){  
     var start=0,end=0;  
     var oTextarea = document.getElementById("textarea");  
     if(isIE){  
       //selection 当前激活选中区,即高亮文本块,和/或文当中用户可执行某些操作的其它元素。  
       //createRange 从当前文本选中区中创建 TextRange 对象,  
       //或从控件选中区中创建 controlRange 集合。  
       var sTextRange= document.selection.createRange();  
 
       //判断选中的是不是textarea对象  
       if(sTextRange.parentElement()== oTextarea){  
         //创建一个TextRange对象  
         var oTextRange = document.body.createTextRange();  
         //移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。  
         oTextRange.moveToElementText(oTextarea);  
           
         //此时得到两个 TextRange  
         //oTextRange文本域(textarea)中文本的TextRange对象  
         //sTextRange是选中区域文本的TextRange对象  
     
         //compareEndPoints方法介绍,compareEndPoints方法用于比较两个TextRange对象的位置  
         //StartToEnd  比较TextRange开头与参数TextRange的末尾。  
         //StartToStart比较TextRange开头与参数TextRange的开头。  
         //EndToStart  比较TextRange末尾与参数TextRange的开头。  
         //EndToEnd    比较TextRange末尾与参数TextRange的末尾。  
     
         //moveStart方法介绍,更改范围的开始位置  
         //character 按字符移动  
         //word       按单词移动  
         //sentence  按句子移动  
         //textedit  启动编辑动作  
     
         //这里我们比较oTextRange和sTextRange的开头,的到选中区域的开头位置  
         for (start=0; oTextRange.compareEndPoints("StartToStart", sTextRange) < 0; start++){  
           oTextRange.moveStart('character', 1);  
         }  
         //需要计算一下\n的数目(按字符移动的方式不计\n,所以这里加上)  
         for (var i = 0; i <= start; i ++){  
           if (oTextarea.value.charAt(i) == '\n'){  
             start++;  
           }  
         }  
     
         //再计算一次结束的位置  
         oTextRange.moveToElementText(oTextarea);  
         for (end = 0; oTextRange.compareEndPoints('StartToEnd', sTextRange) < 0; end ++){  
           oTextRange.moveStart('character', 1);  
         }  
         for (var i = 0; i <= end; i ++){  
           if (oTextarea.value.charAt(i) == '\n'){  
             end++;  
           }  
         }  
       }  
     }else{  
       start = oTextarea.selectionStart;  
       end = oTextarea.selectionEnd;  
     }  
     document.getElementById("start").value = start;  
     document.getElementById("end").value = end;  
   }  
     
     
   function moveCursor(){  
     var oTextarea = document.getElementById("textarea");  
     var start = parseInt(document.getElementById("start").value);  
     var end =  parseInt(document.getElementById("end").value);  
     if(isNaN(start)||isNaN(end)){  
       alert("位置输入错误");  
     }  
     if(isIE){  
       var oTextRange = oTextarea.createTextRange();  
       var LStart = start;  
       var LEnd = end;  
       var start = 0;  
       var end = 0;  
       var value = oTextarea.value;  
       for(var i=0; i<value.length && i<LStart; i++){  
         var c = value.charAt(i);  
         if(c!='\n'){  
           start++;  
         }  
       }  
       for(var i=value.length-1; i>=LEnd && i>=0; i--){  
         var c = value.charAt(i);  
         if(c!='\n'){  
           end++;  
         }  
       }  
       oTextRange.moveStart('character', start);  
       oTextRange.moveEnd('character', -end);  
       //oTextRange.collapse(true);  
       oTextRange.select();  
       oTextarea.focus();  
     }else{  
       oTextarea.select();  
       oTextarea.selectionStart=start;  
       oTextarea.selectionEnd=end;  
     }  
   }  
 </script>  
 <body>  
   <table border="1" cellspacing="0" cellpadding="0">  
     <tr>  
       <td>start: <input type="text" id="start" size="3" value="0"/></td>  
       <td>end:   <input type="text" id="end"   size="3" value="0"/></td>  
     </tr>  
     <tr>  
     <td colspan="2">  
       <textarea id="textarea"  
         onKeydown="posCursor()"  
         onKeyup="posCursor()"  
         onmousedown="posCursor()"  
         onmouseup="posCursor()"  
         onfocus="posCursor()"  
         rows="14"  
         cols="50">虞美人  
春花秋月何时了,往事知多少。  
小楼昨夜又东风,故国不堪回首月明中!  
雕l栏玉砌应犹在,只是朱颜改。  
问君能有几多愁?恰似一江春水向东流。</textarea>  
       </td>  
     </tr>  
     <tr>  
       <td></td>  
       <td><input type="button" onClick="moveCursor()" value="设置光标位置"/></td>  
     </tr>  
   </table>  
 </body>  
</html>




推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式