当前位置: 代码迷 >> JavaScript >> JavaScript 取得输入div光标的位置
  详细解决方案

JavaScript 取得输入div光标的位置

热度:111   发布时间:2012-08-31 12:55:03.0
JavaScript 获得输入div光标的位置

<div contenteditable="true"></div>?
我在这里面输入了123456789这个几个字符?
当我把鼠标放在某个数字的后面时,要获取鼠标是在哪个位置?
比如我的光标在3后面,应该得到3,在1前面应该是0,在6后面应该是6?
就是当我输入任意字符时,获得光标所在的是什么位置??
我要的是ie的方法

?

?

2010-05-26?johnson.lee?(高级程序员)

Html代码??收藏代码
  1. <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">??
  2. <html>??
  3. ????<head>??
  4. ????????<title>?new?document?</title>??
  5. ????</head>??
  6. ????<body>??
  7. ????????<div?contentEditable="true"?style="height:50px;?border:2px?solid?red;"></div>??
  8. ????????光标前的字符:<span?id="selection"></span>??
  9. ????????<script?language="javascript">??
  10. ????????<!--??
  11. ????????????var?cursor?=?0;//?光标位置??
  12. ??
  13. ????????????document.onselectionchange?=?function()?{??
  14. ????????????????var?range?=?document.selection.createRange();??
  15. ????????????????var?srcele?=?range.parentElement();??
  16. ????????????????var?copy?=?document.body.createTextRange();??
  17. ????????????????copy.moveToElementText(srcele);??
  18. ??
  19. ????????????????for?(cursor?=?0;?copy.compareEndPoints("StartToStart",?range)?<?0;?cursor++)?{??
  20. ????????????????????copy.moveStart("character",?1);??
  21. ????????????????}??
  22. ????????????????document.getElementById("selection").innerText?=?srcele.innerText.substring(cursor?-?1,?cursor);??
  23. ????????????}??
  24. ????????//-->??
  25. ????????</script>??
  26. ????</body>??
  27. </html>??
  相关解决方案