javascript - contentEditable 和 lastChild IE、Firefox 和 Chrome LastChild

Question

对于这么长的问题，我深表歉意，但我已经尝试了很多方法并做了一些研究，但还没有找到很多解决方案。我有一个内容可编辑的 div。

  <div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'></div>

当用户在这个 div 中输入内容时，showResult javascript 就会运行，这基本上是一个 ajax 请求，它返回匹配的项目列表。当用户单击其中一个建议时，说出名称“John”，带有建议的范围将添加到此 contentEditable div 中，如下所示:

<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'>
  <span id='uniqueId1' class='SpanClass' contentEditable='false'>John</span>
</div>

选择一个名称后，用户可能想要搜索另一个名称。它是 HTML 术语，这意味着他们将输入以下内容:

<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'>
  <span id='uniqueId1' class='SpanClass' contentEditable='false'>John</span>
New User Text Goes Here
</div>

在 Chrome 上，当用户继续尝试在 div 中输入时，就会发生正确的行为 - showResult 函数在用户输入的新文本上运行并忽略 span 元素。例如，如果用户在已经选择了 John 的情况下键入“Fr”，则它会忽略第一个子项 (John)，并通过 ajax 发送用户键入的内容并返回 Fred 和 Frankie 等建议。

但是，在 IE 中，跨度仍然是内容可编辑的，并且用户无法添加跨度内以外的任何文本，这似乎没有意义，因为显然 contentEditable=false 因此，ajax 请求在“John”文本加上用户接下来输入的任何内容，这不是我想要实现的目标。

最后，在 Firefox 中，跨度不可进行内容编辑，但 lastChild 位仅拾取跨度内的文本，并忽略用户输入的文本。

我已经控制台记录了 showResult(this.lastChild.textContent) 的结果，以查看发送到 ajax 请求的内容。

在 Chrome 中，在“John”范围后的框中输入“Fr”会将“Fr”发送到 ajax 并返回正确的结果。

在 IE 中，在框中输入“Fr”会发送“JohnFr”

在 Firefox 中，输入“Fr”只会发送“John”。

由于问题出在这个lastChild 和span 上，所以我还包含了创建span 元素的Javascript。仅在返回成功结果并单击该结果后才会激活。 (请原谅非常困惑的 Javascript/Jquery)

$('body').on("click", '.TagHints', function(){
//Once you click on the suggestion
var ThisData = $(this).data("id");
var ThisId = $(this).attr("id");
var ThisTag = $(this).data("tag");

//delete the text that the user typed in
elementToRemove = document.getElementById("FakeInput").lastChild;
document.getElementById("FakeInput").removeChild(elementToRemove);

var TagDiv = document.createElement('span');
TagDiv.className = 'SpanClass';
TagDiv.id = ThisId;
TagDiv.innerHTML = ThisTag;
TagDiv.contentEditable=false;

//append the Span to the contentEditable div
document.getElementById("FakeInput").appendChild(TagDiv);

var TagHints = document.getElementsByClassName("TagHints");
    while(TagHints.length > 0){
    TagHints[0].parentNode.removeChild(TagHints[0]);
    }

});

为什么这三个浏览器的行为完全不同？如何让它们都像 Chrome 一样运行？ 有没有更好的方法让文本不在跨度中？

我在另一个答案中读到，firefox 喜欢输入，而 IE 喜欢这种情况下的中断，但两者似乎都不适合我。 :-(。

良好解决方案的一个主要障碍是 jQuery 在第 6 行之后停止工作，这也让我完全困惑。如果有人能解释为什么它不起作用，那也很酷。也许与 ajax 查询和加载 jquery 后创建的内容有关？

感谢您的帮助!

Answer 1

所以，虽然我没有收到任何回复，但我已经想出了一个解决方法。然而，lastChild 在三个浏览器之间的行为仍然不同，因此我们将不胜感激任何进一步的输入。

答案是在文档就绪部分中有一个函数，该函数克隆原始 div，剥离它的子元素并使用 Jquery 抓取按键上的文本。然后将结果传递给 showResult 函数，如下所示:

 $('#FakeInput').keyup(function(){
 var ThisClone =  $('#FakeInput').clone()
     .children()
       .remove()
       .end()
       .text();
  showResult(ThisClone);

  });

同样，当用户做出选择时，我并没有尝试删除用户从 div 中输入的文本，而是简单地使用其类克隆了跨度中的项目，然后清空了 div 的内容并重新附加了这些克隆的内容分区。

var TagItems = $('.TagItems').clone();
$('#FakeInput').empty();
$('#FakeInput').append(TagItems);

该解决方案适用于三种浏览器。