Вставка в contentEditable Div вставляет другой HTML автоматически

Question

Я использую div с атрибутом contentEditable, чтобы удовлетворить мою потребность как простое кросс-браузерное решение для расширения текстовых полей, но у меня возникла интересная проблема.

Вот ДИВ:

<div id="expanderInput" class="inputDiv" contentEditable></div> 

Вот где я хватаю его в JQuery:

var forwardsTo = $expanderInput.html(); 

В большинстве случаев, это возвращает то, что пользователь ввел в DIV, но странные вещи происходят, когда они начинают вставлять туда вещи.

Например, при вставке из Word он правильно отобразит текст в браузере, но добавит дополнительный код html внутри div. Когда я вставляю в адрес электронной почты, таких как «bob@aol.com» от слова, вот код, он действительно вставки в HTML:

<P style="MARGIN: 0in 0in 10pt" class=MsoNormal><FONT size=3><FONT face=Calibri>bob@aol.com<o:p></o:p></p> 

Это создает проблему при попытке получить простой текст пользователь вклеивается, так как он также захватывает HTML-код, что затрудняет правильное разбор.

Есть ли способ ограничить то, что пользователь может вставить в div? Или просто сделать так, что можно вставить только простой текст?

Answer 1

Как насчет захвата .text()?

var forwardsTo = $expanderInput.text(); 

Это не идеальное решение, так как ваш пользователь думает, что он может вставить жирный/курсив и обнаруживает, после представления, что эта разметка была раздели. Возможно, вы можете подать заявку

$expanderInput.text($expanderInput.text()); 

на каждое событие вставки. Это приведет к немедленной разметке разметки.