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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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> 

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值