在javascript中如何获得textbox输入光标的位置

我会陆续写一些在javascript开发中常用的一些技巧和实例代码。

首先说一说在javascript中如何获得Textbox的输入光标的位置。有兴趣的网友看看下面这个实例吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" > <head> <title>无标题页</title> </head> <body> <script language="javascript"> function onkeydownHandler() { var tb = document.getElementById("tbName"); var cursorIndex = GetCursorIndexOfTextBox(tb); alert("此时光标的index是 "+cursorIndex); }

function GetCursorIndexOfTextBox(obj) { obj.focus();//textbox获取焦点 var workRange = document.selection.createRange();//根据选中的文本区创建一个workRange var workRange_copy = document.selection.createRange();//根据选中的文本区再创建一个workRange,用于备份textbox的初始状态,便于恢复初始状态 obj.select();//textbox的全部文本被选中 var allRange = document.selection.createRange();//allRange表示全部文本区 workRange.setEndPoint("StartToStart",allRange);//将workRange的开始点移到allRange的开始点 var cursorposition = workRange.text.length;//获取此时的workRange的Text的长度,即为光标所在文本中的Index workRange.collapse(false);//将workRange的插入点移到workRange的结尾处 workRange_copy.select();//恢复textbox原先的状态 return cursorposition; //返回光标所在文本的index(从0开始) } </script> <input id="tbName" type="text" οnkeydοwn="onkeydownHandler()" /> </body> </html>

经验分享 程序员 微信小程序 职场和发展