Элементы DOM появляются необъяснимо - PullRequest
Новая
       7

Элементы DOM появляются необъяснимо

1 голос
/ 26 января 2012

В веб-приложении, над которым я работал, я обнаружил странную ошибку, которую я смог воспроизвести в Chrome и Safari, но не в Firefox.

Чтобы увидеть ошибку, посетите страницу www.lastcalc.com и введите один символ в верхнем регистре.Символ будет немедленно выделен с помощью белой кнопки «css» через слушателя на событии «keydown» в DIV.question (DIV с contentEditable, установленным в true).Это выполняется функцией highlightSyntax в locutus.js и опирается на библиотеку Rangy, которая отслеживает положение курсора во время выделения.

Пока все хорошо, но теперь нажмите Delete.Внезапно в Safari появляется следующая структура с курсором на элементе br посередине (визуально текст центрируется и получает цвет # 606060): 

<div style="text-align: center;">
    <font class="Apple-style-span" color="#606060">
        <span class="Apple-style-span" style="font-size: 14px;">
           <br/>
        </span>
    </font>
</div>

В Chrome он немного отличается: 

<div style="text-align: center;">
    <font color="#606060">
        <span style="font-size: 14px;">
            <br/>
        </span>
    </font>
</div>

Насколько я знаю, ничто в моем коде не создает ни один из этих элементов, но они появляются.Единственное место в моем коде, о котором упоминается цвет # 606060, - это файл highlighting.css в определении «белого» класса, который является классом, назначенным элементу «span», который был бы удален, когда я нажал клавишу Backspace.

Кажется, что здесь происходит какое-то браузерное вуду, которое почему-то идет не так - кто-нибудь может пролить свет на это?

ps .Если кому-то интересно, что это за веб-сайт, вы можете узнать больше здесь .

edit : после некоторого поиска в Google кажется, что это может быть ошибка вwebkit , так что теперь вопрос: как я могу обойти это?

1 Ответ

1 голос
/ 26 января 2012

Я нашел следующий обходной путь, который в основном включает в себя использование JQuery для удаления нарушающих div и промежутков, при этом стараясь не удалять промежуток, используемый Rangy для отслеживания положения курсора, я делаю это каждый раз, когда появляется событие keyup в редактируемом div: 

element.find("span.highlighted,font[color],div,span:not(.rangySelectionBoundary)").replaceWith(function() {
    return $(this).contents();
});

Это решило мою проблему, но похоже, что настоящая ошибка в WebKit.

...