contentEditable
元素中的游标或插入符号索引位置方面发现了很多优秀的跨浏览器答案,但没有关于如何获取或找到其索引的答案... 我想要什么在
keyup
上知道该div内插入符号的索引。 因此,当用户键入文本时,我随时都可以知道
contentEditable
元素内的光标索引。编辑:我正在寻找文本中的INDEX。 div内容(文本),而不是光标坐标。
<div id="contentBox" contentEditable="true"></div>
$('#contentbox').keyup(function() {
// ... ?
});
评论
查看其在文本中的位置。然后,在该位置之前查找最后出现的“ @”。所以只是一些文本逻辑。另外,我不打算允许
好的,是的,我将需要
@Bertvan:如果插入符号位于
内文本的偏移量
它绝不能在元素内。 元素应呈现为html,因此用户实际上不能将插入号放置在其中。
#1 楼
以下代码假定:在可编辑
<div>
中始终只有一个文本节点,而没有其他节点可编辑div的CSS
white-space
属性没有设置为pre
如果您需要更通用的方法来处理带有嵌套元素的内容,请尝试以下答案:
https://stackoverflow.com/a/4812022/ 96100
代码:
评论
如果其中还有其他标签,则无法使用。问题:如果插入符号位于
– Tim Down
10-10-20在17:01
@Richard:好吧,keyup可能是错误的事件,但这是原始问题中使用的方法。 getCaretPosition()本身在其自身范围内是可以的。
– Tim Down
2014年8月20日上午10:14
如果按Enter并换新行,则该JSFIDDLE演示将失败。该位置将显示0。
–giorgio79
2014年8月21日15:23
@ giorgio79:是的,因为换行符生成一个
或
– Tim Down
2014年8月21日在16:10
无论如何有做,所以它包括行号?
–休会
16年7月18日在16:30
#2 楼
其他答案中未解决的一些皱纹:元素可以包含多个级别的子节点(例如,具有具有子节点的子节点的子节点。) 。)
选择项可以包含不同的开始和结束位置(例如,选择了多个字符)
包含插入符号开始/结束的节点可能不是元素或其直接子元素
这是一种获取起点和终点位置作为元素textContent值的偏移量的方法:
评论
必须选择正确的答案。它与文本内的标签一起使用(接受的响应无效)
– hamboy75
19年4月11日在7:37
有没有办法包括换行符?按下“输入”并不会改变此功能的结果。我也知道问题中没有提到它,但是等效的“ setCaretPosition”将非常有帮助
–康纳
8月21日3:50
重新换行:是的,但这是一个更复杂的解决方案。换行符在文本节点中表示为插入到节点树中的无文本BR节点,这些节点未正确反映在textContent中。因此,要处理它们,基本上所有对textContent的引用都必须替换为一个函数,例如“ getNodeInnerText()”将遍历节点树并构造适当的文本字符串,尤其是将为任何BR节点插入“ \ n”(在大多数情况下-比这更微妙)
–mwag
8月21日13:46
在这里询问/回答setCaretPosition:stackoverflow.com/questions/512528/…(尽管我使用了解决方案的修改版,但不记得为什么了)
–mwag
8月21日13:46
#3 楼
评论
不幸的是,一旦您按回车键并在另一行上开始,它就会停止工作(它再次从0开始-可能从CR / LF开始计数)。
–伊恩
16-09-13在8:33
如果您有一些粗体和/或斜体字,则无法正常工作。
–user2824371
18年1月29日在21:13
#4 楼
尝试以下操作:Caret.js
从文本字段获取插入符的位置和偏移量
https://github.com/ichord/Caret.js
演示:
http://ichord.github.com/Caret.js
评论
真好吃当单击按钮重命名li的内容时,我需要这种行为来将插入符号设置为可编辑的li的结尾。
–akinuri
18-2-26在9:12
@AndroidDev我不是Caret.js的作者,但是您是否考虑过要在所有主要浏览器中获得插入符的位置比几行更为复杂?您是否知道或创建了可以与我们共享的非non肿替代方案?
– adelriosantiago
19年11月28日在17:00
#5 楼
金达晚了晚会,但万一其他人都在挣扎。在过去两天中,我没有发现任何Google搜索能解决的问题,但是我想出了一种简洁优雅的解决方案,无论您有多少个嵌套标签,该解决方案都将始终有效:它一直选择到段落的开头,然后计算字符串的长度以获取当前位置,然后撤消选择以将光标返回到当前位置。如果要对整个文档(一个以上的段落)执行此操作,则将
paragraphboundary
更改为documentboundary
或您的案例的任何粒度。查看API以获得更多详细信息。干杯! :)评论
如果我有
–vam
19-2-5在14:20
奇。我在Chrome中没有得到这种行为。你使用的是什么浏览器?
– Soubriquet
19年2月8日在16:02
看起来或并非所有浏览器都支持selection.modify。 developer.mozilla.org/zh-CN/docs/Web/API/Selection
–克里斯·沙利文(Chris Sullivan)
19年4月7日在7:42
非常好。做得好。
–伦·怀特
12月20日下午2:10
#6 楼
评论
这个实际上对我有用,我已经尝试了以上所有方法,但没有。
– iStudLion
18/12/28在16:29
谢谢,但是它还会在新行上返回{x:0,y:0}。
–hichamkazan
19 Mar 7 '19 at 14:13
这将返回像素位置,而不是字符偏移量
– 4esn0k
3月28日10:02
谢谢,我正在寻找从插入符号检索像素位置,它工作正常。
–Sameesh
6月14日9:25
谢谢!这就是我一直在寻找的东西,它看起来很协调,而不是坐标偏移!
– Ariel Frischer
11月19日23:03
#7 楼
window.getSelection-vs-document.selection
这个对我有用:
调用行取决于事件类型,对于键事件,请使用:
对于鼠标事件,请使用:
在这两种情况下,我通过添加目标索引来照顾断行
#8 楼
注意:范围对象本身可以存储在变量中,并且可以随时重新选择,除非contenteditable div的内容发生更改。
参考对于IE 8及更低版本:
http://msdn.microsoft.com/zh-cn/library/ms535872(VS.85).aspx
标准(所有其他)浏览器的参考:
https://developer.mozilla.org/en/DOM/range(它是mozilla文档,但代码也可以在chrome,safari,opera和ie9中使用)
评论
谢谢,但是我究竟如何在div内容中获得插入符号位置的“索引”?
–贝特万
2010-10-19 20:22
好了,好像在.getSelection()上调用.baseOffset可以解决问题。因此,这与您的答案一起回答了我的问题。谢谢!
–贝特万
2010-10-19 20:32
不幸的是.baseOffset只在webkit中起作用(我认为)。它还仅给您与插入符号的直接父级之间的偏移量(如果您在
– Nico Burns
2010-10-19 20:52
最好只是存储范围对象本身,并使用window.getSelection()。addrange(range); <-标准和range.select(); <-IE,用于将光标重新放置在同一位置。 range.insertNode(nodetoinsert); <-standards和range.pasteHTML(htmlcode); <-IE,用于在光标处插入文本或html。
– Nico Burns
2010-10-19 20:56
大多数浏览器返回的Range对象和IE返回的TextRange对象是完全不同的东西,因此我不确定此答案能否解决很多问题。
– Tim Down
2010-10-19 23:44
#9 楼
由于这使我永远无法使用新的window.getSelection API,因此我将分享给后代。请注意,MDN建议对window.getSelection提供更广泛的支持,但是,您的里程可能会有所不同。这是在键盘启动时触发的jsfiddle。但是请注意,快速方向键的按下以及快速删除似乎是跳过事件。
评论
为我工作!非常感谢。
– dmodo
19-09-11的1:58
使用此文本时,由于已折叠,因此不再可能进行选择。可能的情况:需要评估每个keyUp事件
– hschmieder
19年9月28日在0:31
#10 楼
一种直接的方法,它遍历contenteditable div的所有子项,直到到达endContainer。然后,我添加结束容器偏移量,然后得到字符索引。应该与任何数量的嵌套一起使用。使用递归。注意:需要多边形填充,例如支持
Element.closest('div[contenteditable]')
https://codepen.io/alockwood05/pen/vMpdmZ