Я работаю над подсветкой синтаксиса в реальном времени в javascript, используя contenteditable. При разборе содержимого я извлекаю текст div и использую шаблоны регулярных выражений, чтобы правильно его стилизовать. Затем я устанавливаю innerHtml div в разобранный контент. Однако при этом курсор исчезает с экрана.
Я создал эту функцию для сброса курсора, и она отлично работает в Firefox. Но в Chrome курсор движется более странным образом, что вполне предсказуемо. Обычно он устанавливается в первом пробеле в документе вместо того места, где он находился перед анализом.
Символ каретки, хранящийся в переменной cc, находится в том месте, где он должен быть.
/**
* Put cursor back to its original position after every parsing, and
* insert whitespace to match indentation level of the line above this one.
*/
findString : function()
{
cc = '\u2009'; // carret char
if ( self.find(cc) )
{
var selection = window.getSelection();
var range = selection.getRangeAt(0);
if ( this.do_indent && this.indent_level.length > 0 )
{
var newTextNode = document.createTextNode(this.indent_level);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);
this.do_indent = false;
}
selection.removeAllRanges();
selection.addRange(range);
}
}
Некоторые факты о вызове этих функций:
- Когда я раскомментирую код, который переключает содержимое innerHtml, вместо этого курсор обычно перемещается в конец документа.
- Если я раскомментирую вызывающую функцию findString (), анализ будет выполнен, но курсор исчезнет, пока я не верну фокус в div.
- Если я раскомментирую обе строки, то div будет вести себя так, как и следовало ожидать, за исключением, конечно же, анализа.
Что вызывает это неправильное поведение в Chrome, пока оно работает в Firefox?
РЕДАКТИРОВАТЬ: Больше информации
Я выполнял некоторые входы в window.getSelection () и заметил, что он содержит различную информацию при сравнении Chrome и Firefox. Это привело к тому, что скрипт вел себя так, как и должен, но с аргументом, который неверен.
Действительно странно то, что когда я регистрирую window.getSelection () как первое действие скрипта keyhandler, он ведет себя так:
- Без каких-либо изменений я получаю "неправильный" объект.
- Если точка останова установлена прямо под директивой console.log (), сценарий приостанавливается, и в журнале отображается «правильный» объект, так, как я этого хочу.
Регистратор:
console.log(window.getSelection());
// Do keyhandling stuff...