установка позиции курсора/курсора в конец содержимого, разрешенного для контента.

Для контента, пригодного для контента, чтобы исправить ряд проблем, связанных с FireFox. Мне пришлось добавить тег br в конец div.установка позиции курсора/курсора в конец содержимого, разрешенного для контента.

<div id="testDiv" contentEditable="true"> 
Hey, click the button then hit space.<br>  
</div>

Это на самом деле то, как google plus обрабатывает их contentEditable логику div с их пометкой пользователя.

Проблема в том, что перемещение курсора в конец div в firefox означает, что каретка после тега
и пробел пробега перемещается на следующую строку.

Вы можете проверить это поведение здесь: jsFiddle, нажав кнопку, нажав клавишу пробела.

Я использую следующий код, чтобы переместить курсор в последнюю позицию диапазона:

function placeCaretAtEnd(el) { 
      el.focus(); 
      if (window.getSelection){ 
       if (typeof window.getSelection != "undefined" 
         && typeof document.createRange != "undefined") { 
        var range = document.createRange(); 
        range.selectNodeContents(el); 
        range.collapse(false); 
        var sel = window.getSelection(); 
        sel.removeAllRanges(); 
        sel.addRange(range); 
       } else if (typeof document.body.createTextRange != "undefined") { 
        var textRange = document.body.createTextRange(); 
        textRange.moveToElementText(el); 
        textRange.collapse(false); 
        textRange.select(); 
       } 
      } 
     }

Будет ли возможность изменить этот код, чтобы игнорировать бр тег или переместить позицию курсора вместо непосредственно перед тегом br?

источник

2013-08-05 mstef

Так в чем проблема? Если я запустил этот скрипт в Firefox и Chrome без тега '
', я получаю ту же функциональность, однако я замечаю разницу при использовании тега br. –

Я могу обновить скрипку, но тег
очень необходим при работе с нередактируемыми элементами html в контентных элементах. Например, если бы у меня был вход в редактируемый, он не удалял бы последовательно использование backspace, и я бы не смог сфокусироваться в конце после элемента. – mstef

Не знаю, поможет ли это кому-либо еще. Это не работает кросс-браузер, но поскольку моя проблема была специфичной для FireFox и как она обрабатывает диапазон/выбор с помощью тегов BR, это, похоже, решило мою проблему.

я в основном просто установить конец диапазона до BR

range.setEndBefore($(el).find('br')[0]);

так в моей функции я делаю это только для Firefox:

function placeCaretAtEnd(el) { 
        el.focus(); 
        if (window.getSelection){ 
         if (typeof window.getSelection != "undefined" 
           && typeof document.createRange != "undefined") { 
          var range = document.createRange(); 
          range.selectNodeContents(el); 
          range.collapse(false); 
          if ($('#browser-version-check').val() == 'firefox') { 
           range.setEndBefore($(el).find('br')[0]); 
          } 
          var sel = window.getSelection(); 
          sel.removeAllRanges(); 
          sel.addRange(range); 
         } else if (typeof document.body.createTextRange != "undefined") { 
          var textRange = document.body.createTextRange(); 
          textRange.moveToElementText(el); 
          textRange.collapse(false); 
          textRange.select(); 
         } 
        } 
       }

А вот обновленный jsfiddle http://jsfiddle.net/mstefanko/fG5kJ/2/ , не включили проверку браузера, чтобы эта демонстрация работала корректно только в FireFox.

источник

2013-08-05 23:42:57 mstef

установка позиции курсора/курсора в конец содержимого, разрешенного для контента.

ответ

Смежные вопросы