如何在contenteditable div中的跨度中设置光标位置

徐大卫

下面的代码是我现在使用的代码,只是将光标位置设置为span的尾部

var node = document.getElementById("span_first");
var range = document.createRange();  
range.setStartAfter(node);
var sel = window.getSelection();
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

http://jsfiddle.net/vXnCM/3837/

但是我想在范围内的任何位置设置光标位置,该怎么办?

谢谢。

地面

您可以这样做:

function setCaret() {
   var element = document.getElementById("input");
   var range = document.createRange();  
   var node;   
   node = document.getElementById("first");  
   range.setStart(node.childNodes[0], 1);  <-- sets the location 
   var sel = window.getSelection();
   range.collapse(true);
   sel.removeAllRanges();
   sel.addRange(range);
   element.focus();    
}

node.childNodes []与要在其上设置光标的行有关,下一个数字是该行的位置。在此示例中,将空间1移动到第0行(实际上是第1行)。因此,如果将这些值更改为变量并将其作为参数放入函数中,则可以指定位置。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在contentEditable元素的子元素中设置光标?

来自分类Dev

使用contenteditable div获取并设置光标位置

来自分类Dev

如何在表格 Html 中添加 contenteditable

来自分类Dev

如何在contenteditable div中获取已删除的元素?

来自分类Dev

如何在contenteditable div中抓取某些单词

来自分类Dev

如何在contenteditable div中获取已删除的元素?

来自分类Dev

如何在contenteditable div中过滤用户粘贴的内容?

来自分类Dev

如何在html和javascript中的特定输入文本中设置光标位置

来自分类Dev

如何在div中居中跨度

来自分类Dev

如何从contenteditable div开始到光标位置获取文本

来自分类Dev

如何在单击元素时将 contenteditable 设置为 true

来自分类Dev

如何在angular2的div的contenteditable上使用[[ngModel)]?

来自分类Dev

如何在jQuery的ContentEditable div中集中多条选定的线

来自分类Dev

如何在contenteditable div上每行旁边显示行号

来自分类Dev

如何在谷歌浏览器中的输入文本末尾设置光标位置

来自分类Dev

VBA-如何在文本框中的特定位置设置光标?

来自分类Dev

如何在pygame中的对象中心设置鼠标光标的位置?

来自分类Dev

在“有子级”的“ contenteditable” div中设置插入位置

来自分类Dev

如何在div中设置图像的绝对位置

来自分类Dev

如何在contenteditable div中禁用元素选择和调整大小?

来自分类Dev

如何在Vue中的contenteditable div的嵌套节点上捕获焦点事件?

来自分类Dev

如何在具有contenteditable属性的div中应用文本样式

来自分类Dev

如何在正则表达式中匹配来自 Contenteditable Div 的冗余行

来自分类Dev

将光标位置保留在contenteditable中

来自分类Dev

如何在Ng重复中设置跨度值

来自分类Dev

如何在WPF中更改鼠标光标的指向位置

来自分类Dev

`ansi-terminal`如何在Haskell中获取光标位置

来自分类Dev

如何在Word中的光标位置插入文本?

来自分类Dev

如何在画布中获得更多光标位置

Related 相关文章

  1. 1

    如何在contentEditable元素的子元素中设置光标?

  2. 2

    使用contenteditable div获取并设置光标位置

  3. 3

    如何在表格 Html 中添加 contenteditable

  4. 4

    如何在contenteditable div中获取已删除的元素?

  5. 5

    如何在contenteditable div中抓取某些单词

  6. 6

    如何在contenteditable div中获取已删除的元素?

  7. 7

    如何在contenteditable div中过滤用户粘贴的内容?

  8. 8

    如何在html和javascript中的特定输入文本中设置光标位置

  9. 9

    如何在div中居中跨度

  10. 10

    如何从contenteditable div开始到光标位置获取文本

  11. 11

    如何在单击元素时将 contenteditable 设置为 true

  12. 12

    如何在angular2的div的contenteditable上使用[[ngModel)]?

  13. 13

    如何在jQuery的ContentEditable div中集中多条选定的线

  14. 14

    如何在contenteditable div上每行旁边显示行号

  15. 15

    如何在谷歌浏览器中的输入文本末尾设置光标位置

  16. 16

    VBA-如何在文本框中的特定位置设置光标?

  17. 17

    如何在pygame中的对象中心设置鼠标光标的位置?

  18. 18

    在“有子级”的“ contenteditable” div中设置插入位置

  19. 19

    如何在div中设置图像的绝对位置

  20. 20

    如何在contenteditable div中禁用元素选择和调整大小?

  21. 21

    如何在Vue中的contenteditable div的嵌套节点上捕获焦点事件?

  22. 22

    如何在具有contenteditable属性的div中应用文本样式

  23. 23

    如何在正则表达式中匹配来自 Contenteditable Div 的冗余行

  24. 24

    将光标位置保留在contenteditable中

  25. 25

    如何在Ng重复中设置跨度值

  26. 26

    如何在WPF中更改鼠标光标的指向位置

  27. 27

    `ansi-terminal`如何在Haskell中获取光标位置

  28. 28

    如何在Word中的光标位置插入文本?

  29. 29

    如何在画布中获得更多光标位置

热门标签

归档