textarea光标定位,textarea标记

导航：

• 1、如何实现textarea光标定位
• 2、Javascript 如何移动texearea的光标到指定位置 [比如说下一行开头] 在线等 可以用jquery
• 3、我的textarea点击一下，写字的光标就在中间部位，怎么把光标移到前面去？
• 4、Java中如何将设置TextArea中的光标位置
• 5、JavaScript textarea中设置光标位置 然后键盘输入替换光标处已有的内容 急急急

如何实现textarea光标定位

   span id="stat"数量:0, 合计:0/span

   span style="width:20px"/span

   span id="position"/spanbr /

   textarea ID="tbxWeightDetail" style="width:250px" width="250px" runat="server" TextMode="MultiLine" 

      onchange="getPosition(this);calcWeight(this, true);" 

       onkeyup="getPosition(this);calcWeight(this);" onclick="getPosition(this);" onblur="clearPosition(this);"

        /textarea

    script

      function calcWeight(input, c)

       {

          var a = [];

        input.value.replace(/\d+([\.]\d+){0,1}/g, function($0) { a.push($0); });

           var sum = eval(a.join("+")) || 0;

         document.getElementById("stat").innerHTML = "数量:" + a.length + ", 合计:" + sum.toFixed(2);

         if (c)

         {

               input.value = a.join("+");

         }

      }

      calcWeight(document.getElementById("tbxWeightDetail"));

      function getPosition(input)

      {

          var rng = event.srcElement.createTextRange();

          var length = 0;//设置初始位置

         input.focus();

         var scrollPosition = input.scrollTop;//获得滚动条的位置  

          var selectedRange = document.selection.createRange();//创建文档选择对象

         rng.collapse(true);

         rng.select();

          var j = document.selection.createRange();//为新的光标位置创建文档选择对象

         selectedRange.setEndPoint("StartToStart",j);//在以前的文档选择对象和新的对象之间创建对象

           var str = selectedRange.text;//获得对象的文本

          var re = new RegExp("[\\n]","g");

        str = str.replace(re,"");//过滤  

          length = str.length;//获得长度.也就是光标的位置  

           selectedRange.collapse(false);  

          selectedRange.select();//把光标恢复到以前的位置

          input.scrollTop = scrollPosition;//把滚动条恢复到以前的位置

          var a = [];

           str.replace(/\+/g, function($0) { a.push($0); });

           document.getElementById("position").innerHTML = "第" + (a.length + 1) + "个明细";

    }

      function clearPosition(input)

      {

          document.getElementById("position").innerHTML = "";

      }

 /script

Javascript 如何移动texearea的光标到指定位置 [比如说下一行开头] 在线等 可以用jquery

textarea的光标是受键盘控制的。home当前行头部textarea光标定位，end当前行尾部，↑上一行，↓下一行。textarea光标定位你可以。这样textarea光标定位你就可以用JS代码模拟这4个键来控制光标的位置。如果想到下一行开头，就模拟两次按键就行。

模拟按键的函数。。

function fireKeyEvent(el, evtType, keyCode){

var doc = el.ownerDocument,

win = doc.defaultView || doc.parentWindow,

evtObj;

if(doc.createEvent){

if(win.KeyEvent) {

evtObj = doc.createEvent('KeyEvents');

evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 );

}

else {

evtObj = doc.createEvent('UIEvents');

Object.defineProperty(evtObj, 'keyCode', {

get : function() { return this.keyCodeVal; }

});

Object.defineProperty(evtObj, 'which', {

get : function() { return this.keyCodeVal; }

});

evtObj.initUIEvent( evtType, true, true, win, 1 );

evtObj.keyCodeVal = keyCode;

if (evtObj.keyCode !== keyCode) {

console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");

}

}

el.dispatchEvent(evtObj);

}

else if(doc.createEventObject){

evtObj = doc.createEventObject();

evtObj.keyCode = keyCode;

el.fireEvent('on' + evtType, evtObj);

}

}

使用方法：传入你想要按的键号码。假设模拟回车，

fireKeyEvent(topWin.__activeElement, 'keydown', 13);

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

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

效果如图：

源码：

htmlhead  

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /  

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /  

titleJS设置及获取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; ivalue.length  iLStart; 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  

       tdstart: input type="text" id="start" size="3" value="0"//td  

       tdend:   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  

       tdinput type="button" onClick="moveCursor()" value="设置光标位置"//td  

     /tr  

   /table  

 /body  

/html

Java中如何将设置TextArea中的光标位置

解决方案1：

jTextArea1;

好像就这两个函数吧.setSelectionEnd(pos)。jTextArea1.setSelectionStart(pos)

解决方案2：

a.requestFocus

你看看textArea的属性里有

如果你是刚刚打开一个窗口就要让textArea获得焦点，可以在打开窗口的事件里添加a。requesFocus

解决方案3：

setSelectionStart

JavaScript textarea中设置光标位置 然后键盘输入替换光标处已有的内容 急急急

div

textarea id="ta" style="width:500px;height:500px;"/textarea

/div

script type="text/javascript"

$(function() {

var setCaretPos = function(element, location){

if(element.setSelectionRange)

{

element.focus();

element.setSelectionRange(location,location);

}

else if (document.body.createTextRange) {

var range = document.body.createTextRange();

range.moveToElementText(element);

range.collapse(true);

range.move('character', location);

range.select();

}

};

$("#ta").keydown(function(event){

var t = $("#ta");

var tempValue = t.val();

var pos = t.get(0).selectionStart;

var newValue = tempValue.substring(0, pos) + tempValue.substring(pos + 1, tempValue.length);

t.val(newValue);

setCaretPos(t.get(0), pos);

});

$("#ta").val("testtest\n______");

setCaretPos($("#ta").get(0), $("#ta").val().split('\n')[0].length + 1);

});

/script

具体思路是

1. setCaretPos(element, pos)就是将光标设置在element元素的pos位置

2. 键盘监听

a, 获取当前光标位置

b, 将当前位置后面的那个 _ 去掉(这里面要取原文本, 然后处理, 然后结果写到textarea中, 注意, 此时textarea的光标在最后位置, 所以又第三步)

c, 将光标定位到原当前位置

然后键盘输入自然会在光标的后面位置, 也就是实现了insert功能

我在firefox, ie9下测试通过, 使用了jquery去取dom元素, 如果没有jquery, 可以document直接取

如果觉得满意, 请采纳 谢谢