1、第一步：打开HTML编辑工具编辑获取文本对象框中的代码：<!DOCTYPE html争犸禀淫><html><head> <meta charset="UTF-8"> <title>js操作input文本框中光标位置</title> <script> //获取当前文本框中,下标所在的位置下标从0开始 function test1(){ var obj = document.getElementById("test"); alert(getCursortPosition(obj)); } /** * 获取当前光标位置 * @param ctrl * @returns {number} */ function getCursortPosition(element) { var CaretPos = 0; if (document.selection) {//支持IE element.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -element.value.length); CaretPos = Sel.text.length; } else if (element.selectionStart || element.selectionStart == '0')//支持firefox CaretPos = element.selectionStart; return (CaretPos); } </script></head><body> <input type="text" value="0123456789" id="test"/> <button onclick="test()">测试</button> <p>输入过程中console.log(当前光标位置),鼠标弹起console.log(光标向前移动一位)</p></body></html>
2、第二步：测试获取input文本框中光标所在内容的位置。使用谷歌打开页面将光标放入文本框中3,4,5的位置分别得到其所在的文本光标位置。
3、第三步：打开编辑工具编辑设置光标在文本框中内容位置的代码。<!DOCTYPE htm盟敢势袂l><html>稆糨孝汶;<head> <meta charset="UTF-8"> <title>js操作input文本框中光标位置</title> <script> //设置文本框中光标的位置 function test(){ var obj = document.getElementById("test"); var pos = parseInt(document.getElementById("num").value); setCaretPosition(obj,pos); } /** * 设置光标位置 * @param ctrl 需要设置对象 * @param pos 对象中内容的光标的所在位置小标从0开始 */ function setCaretPosition(element, pos){ if(element.setSelectionRange) { element.focus(); element.setSelectionRange(pos,pos); } else if (element.createTextRange) { var range = element.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } </script></head><body>设置下面光标的位置：<input type="text" value="1" id="num" /><button onclick="test()">测试</button><br /> <input type="text" value="0123456789" id="test" /></body></html>
4、第四步：测试设置input文本内容光标位置的代码。如下图打开页面--将鼠标放到文本框对应的位置，然后点击测试获取当前光标所在文本的位置
5、第五步：编辑测试多行文本框获取光标位置的代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js操作input文本框中光标位置</title> <script> //获取当前多行文本框中,下标所在的位置下标从0开始 function test(){ var obj = document.getElementById("test"); alert(getCursortPosition(obj)); } /** * 获取当前光标位置 * @param ctrl * @returns {number} */ function getCursortPosition(element) { var CaretPos = 0; if (document.selection) {//支持IE element.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -element.value.length); CaretPos = Sel.text.length; } else if (element.selectionStart || element.selectionStart == '0')//支持firefox CaretPos = element.selectionStart; return (CaretPos); } </script></head><body> <textarea id="test">0123456789</textarea> <button onclick="test()">测试</button></body></html>
6、第六步：测试内容主要测试了多行文本框3,4的位置。
7、第七步：编辑设置多行文本框中的内容的光标位置，编辑代码如下<!DOCTYPE htm盟敢势袂l><html>稆糨孝汶;<head> <meta charset="UTF-8"> <title>js操作input文本框中光标位置</title> <script> //设置多行文本框中光标的位置 function test(){ var obj = document.getElementById("test"); var pos = parseInt(document.getElementById("num").value); setCaretPosition(obj,pos); } /** * 设置光标位置 * @param ctrl 需要设置对象 * @param pos 对象中内容的光标的所在位置小标从0开始 */ function setCaretPosition(element, pos){ if(element.setSelectionRange) { element.focus(); element.setSelectionRange(pos,pos); } else if (element.createTextRange) { var range = element.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } </script></head><body>设置下面光标的位置：<input type="text" value="1" id="num" /><button onclick="test()">测试</button><br /> <textarea id="test">0123456789</textarea></body></html>
8、第八步：测试设置多行文本框中下标所在位置。如下图，设置光标位置的文本框中输入1和6两个框，点击测试框--》可以看到下面文本框光标位置变化。
