contenteditable在插入的跨度外插入插入符号 [英] contenteditable put caret outside inserted span

问题描述

http://jsfiddle.net/VzbYJ/86/

请查看此链接。当它清除它将要
插入跨度节点在插入的地方。问题是，在插入
节点后，如果我按任何字符，它的颜色也是绿色的。
，因为它也在span元素内。所以我怎样才能把插入后的插入符
，这样下一个插入节点的颜色保持正常。

我试图找到选中的节点（基于插入位置），设置元素后面的范围并使用折叠（false）。但我无法获得所需的输出。

查找节点的代码：

< pre $ function findNode（event）
{
if（event.type =='click'）
par = event.target;

if（event.type =='keyup'）{
if（document.selection）
par = document.selection.createRange（）。parentElement（）;
else if（window.getSelection）{
var range = window.getSelection（）。getRangeAt（0）;
par = range.commonAncestorContainer.parentNode;




$ b $ p
$ b

然后我用setEndAfter（）设置边界ant塌陷（假）。
我是这个领域的新手，所以我不确定我是对的。
所以任何建议都非常明显。提前致谢。

解决方案

快速查看此页面上的相关部分，即可获得所需信息的链接。总之，浏览器（除非是Firefox）阻止它，最简单的解决方法是在插入<$ c之后插入零宽度空格字符（Unicode U + 200B ） $ c>< span> 元素。除非是非常丑陋的黑客攻击，否则一旦不再需要这些零宽度空间，就会出现跟踪和删除这些零宽度空间的问题。

已更新您的jsFiddle以使用此方法，但没有任何代码来删除零宽度空间：

http://jsfiddle.net/VzbYJ/87/

有关背景信息，请参阅相关问题列表/答案：

• 将插入符号位置设置为contentEditable元素中的空白节点 https://stackoverflow.com/a/15814297/96100


• 在插入标记之外放置插入符号i n ContentEditable

我需要这是一个股票回答，它经常出现......

http://jsfiddle.net/VzbYJ/86/

Please have a look at this link. As it clears that it is going to insert a span node at the caret place. Problem is,after inserting the node if I am pressing any character its color is also green. because it is also coming inside the span element. So how can I put the caret after the span so that the color of next inserted node remains normal.

I tried to find the selected node (based on to caret position), set the range after the element and used collapse(false). But I could not get the desired output.

Code for find the node :

  function findNode(event)
  {
    if (event.type == 'click')
    par = event.target;

    else if (event.type == 'keyup'){        
        if (document.selection)
        par = document.selection.createRange().parentElement();
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        par = range.commonAncestorContainer.parentNode;
    }
  }

and next I set the boundary using setEndAfter() ant collapse(false). I am new in this field so I am not sure that what extend I am right. So any suggestion is very much appreciable. Thanks in advance.

解决方案

A quick look at the "Related" section on this very page will give you links to all the information you need. In summary, the browser (unless it's Firefox) prevents it and the easiest workaround is to insert a zero-width space character (Unicode U+200B) after the inserted <span> element. As well as being a very ugly hack, this does have the problem of keeping track of and removing these zero-width spaces once they're no longer required.

I've updated your jsFiddle to use this approach but without any code to remove the zero-width spaces:

http://jsfiddle.net/VzbYJ/87/

For background, here's a list of relevant questions/answers:

• Setting the caret position to an empty node inside a contentEditable element
• https://stackoverflow.com/a/15814297/96100
• Placing caret outside of inserted tag in ContentEditable
• Setting the caret position to an empty node inside a contentEditable element

I need a stock answer for this, it comes up so often...

这篇关于contenteditable在插入的跨度外插入插入符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！