JavaScript « Вернуть курсор в прежнее положение после вставки в contentEditable div

После вставки курсор пропадает. Надо его как-то вернуть в div...
Один парень со StackOverflow нашел такой solution :
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

cursorPos=document.selection.createRange()
clickx = cursorPos.getBoundingClientRect().left;
clicky = cursorPos.getBoundingClientRect().top;

// Делаем что-то. А дальше ресторим курсор:

cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();
 

Только вот у меня не работает : "Cannot call method 'createRange' of undefined".
Пробовал менять document.selection.createRange() на document.createRange(), но тогда пишет, что нет метода moveToPoint :(

Помогите кто разбирается...
0
contenteditable cursor javascript range

1 ответов

попробуйте вот так. работает мультибраузерно и стабильно


setCursor: function(input){
      var result = {start: 0, end: 0};
      if (input.setSelectionRange){
        result.start= input.selectionStart;
        result.end = input.selectionEnd;
      } else if (!document.selection) {
        return false;
      } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        var stored_range = range.duplicate();
        stored_range.moveToElementText(input);
        stored_range.setEndPoint('EndToEnd', range);
        result.start = stored_range.text.length - range.text.length;
        result.end = result.start + range.text.length;
      }
      return result;
  },

  setCursor: function(textarea, start, end){
      if(textarea.createTextRange) {
        var range = textarea.createTextRange();
        range.move("character", start);
        range.select();
      } else if(textarea.selectionStart) {
        textarea.setSelectionRange(start, end);
      }
  }
 
0

Код решения будет отличаться для IE и других браузерах. Я объясню основную идею, а уж код вы сами пишите.
Перед вставкой (ловим или событие paste или шоткат ctrl-v на keydown), в позицию курсора ставим путой спан с каким-то id, после вставки создаем новое текстовое выделение, выделяем наш спан, схлопываем выделение и удаляем спан. Возможно еще понадобиться вызвать focus на элементе. Единственный кто доставит - опера, у нее нет события paste (могу ошибаться насчет последней версии) и отловить вставку через контекстное меню невозможно.
Этот способ я использовал в редакторе elRTE http://elrte.org - он отлично работает.

2