contentEditable and lastChild IE, Firefox & Chrome LastC

contentEditable and lastChild IE, Firefox & Chrome LastChild

本文关键字：amp Chrome LastC Firefox and lastChild IE contentEditable      更新时间：2023-09-26
对这个

长问题表示歉意，但我尝试了很多东西，做了一些研究，但没有找到太多的解决方案。我有一个内容可编辑的div。

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

当用户在此div中键入某些内容时，showResult javascript运行，这基本上是一个ajax请求，它返回匹配的项目列表。当用户单击其中一个建议时，说出名称"John"，带有建议的跨度将添加到此内容可编辑的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 元素。例如，如果用户键入"Fr"并且已经选择了 John，它将忽略第一个子项 (John(，并通过 ajax 发送用户键入的内容并返回 Fred 和 Frankie 等建议。

但是，在IE中，跨度仍然是内容可编辑的，用户不能添加除跨度之外的任何文本，这似乎没有意义，因为它显然是contentEditable=false 因此，ajax请求在"John"文本以及用户接下来键入的任何内容上运行，这不是我想要实现的。

最后，在 Firefox 中，跨度不是 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 后创建的内容有关？

感谢您的帮助！

所以，虽然我没有任何回应，但我想出了一个解决方法。但是，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);

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

相关文章：