contentEditable and lastChild IE, Firefox & Chrome LastChild

Question

Извинения за длинный вопрос, но я пробовал много вещей и сделал некоторые исследования, и havent нашел большую часть решения. У меня есть редактируемый контент div.

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

Когда пользователь вводит что-то в этом DIV, то showResult Javascript работает, который является в основном запрос Ajax, который возвращает список элементов, которые соответствуют. Когда пользователь нажимает на одно из предложений, скажем, имя «Джон», пролет с предложением добавляется в этот 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. Например, если пользователь вводит в «Fr» уже выбранный John, он игнорирует первых детей (John) и отправляет то, что пользователь вводил с помощью ajax, и возвращает такие предложения, как Fred and Frankie.

Однако, в IE промежуток по-прежнему доступен для редактирования, и пользователь не может добавить текст, отличный от интервала, что кажется бессмысленным, поскольку оно явно contentEditable = false. Поэтому запрос ajax выполняется на Текст «Джон» плюс все, что пользователь вводит в следующем, чего я не пытаюсь достичь.

Наконец, в Firefox, продолжительность не contentEditable НО LastChild бит только поднимает текст в пролете, и игнорирует текст пользователь помещает в.

Я консольный вошли результаты showResult (это .lastChild.textContent), чтобы узнать, что отправляется в запрос ajax.

В Chrome, набрав «Fr» в поле после диапазона «Джон», отправляет «Fr» в ajax и возвращает правильный результат.

В IE, напечатав в "Fr" в поле "посылает JohnFr"

В Firefox, набрав в "Fr" просто посылает "Джон".

Поскольку проблема с этой последней версией и диапазоном, я также включил Javascript, который создает элемент span. Это активируется только после того, как результат будет возвращен, и результат будет нажат. (Пожалуйста, простите за очень грязный 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]); 
    } 

}); 

Почему три браузеры ведут себя совершенно по-разному, и как я могу получить их все ведут себя как Хром? Есть ли лучший способ получить текст не в промежутках?

Я прочитал еще один ответ, что 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); 

Это решение работает через три браузера.