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中，span仍然是内容可编辑的，并且用户不能添加除span之外的任何文本，这似乎没有意义，因为它显然是contentEditable = false因此ajax请求在“约翰“文字加上下一个用户输入的内容，这不是我想要实现的目标。

最后，在Firefox中，span不是contentEditable但是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的内容并重新附加这些克隆，的div。

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

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

contentEditable和lastChild IE，Firefox＆amp; Chrome LastChild

1 个答案: