Javascript设置和获取Textarea的光标位置的方法(亲测有用),可定位光标到某个位置
来源:互联网 发布:专业日语翻译软件 编辑:程序博客网 时间:2024/05/21 10:44
原文网址:http://www.iteye.com/topic/716748
效果如图:
源码:
<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>
阅读全文
0 0
- Javascript设置和获取Textarea的光标位置的方法(亲测有用),可定位光标到某个位置
- Javascript设置和获取Textarea的光标位置的方法
- 获取 Textarea 的光标位置
- 获取 Textarea 的光标位置
- 获取 Textarea 的光标位置
- JavaScript获取光标位置、定位光标位置
- javascript中获取和设置文本框中光标的位置
- 获取 Textarea 的光标位置 【转】
- JavaScript获取光标的位置
- JS获取和设置光标的位置
- UITextField 光标的位置获取和设置
- JS获取textArea中光标位置的方法
- textarea 光标位置获取
- 光标定位和获取当前光标位置
- JavaScript 获取/设置光标位置,兼容Input&&TextArea
- javascript获取textarea光标位置,内容方法(IE, Firefox)
- javascript获取textarea光标位置,内容方法(IE, Firefox)
- 获取光标的位置
- 【美团】直方图内最大矩形
- SpringMVC+Spring+Mybatis整合程序之整合
- 两个大数相乘(字符串形式)
- js中return;return true;return false;区别
- 文章标题
- Javascript设置和获取Textarea的光标位置的方法(亲测有用),可定位光标到某个位置
- java 发送HTTP请求工具
- JS核心基础之闭包的应用
- 总结1
- POJ 3691 DNA repair AC自动机 + dp
- 在Go语言中使用JSON
- 处理冒泡的两种方式
- Linux CentOS 7 安装Apache Subversion
- python中数字类型与处理工具