3

Вопрос по javascript, jquery, html, nodes, contenteditable – contenteditable положить каретку вне вставленного пролета

http://jsfiddle.net/VzbYJ/86/

Пожалуйста, посмотрите на эту ссылку. Поскольку это очищает это, это собирается вставить узел промежутка в месте каретки. Проблема в том, что после вставки узла, если я нажимаю любой символ, его цвет также зеленый. потому что он также входит в элемент span. Так как я могу поставить каретку после интервала, чтобы цвет следующего вставленного узла оставался нормальным.

Я попытался найти выбранный узел (в зависимости от положения каретки), установить диапазон после элемента и использовал коллапс (false). Но я не смог получить желаемый результат.

Код для поиска узла:

  function findNode(event)
  {
    if (event.type == 'click')
    par = event.target;

    else if (event.type == 'keyup'){        
        if (document.selection)
        par = document.selection.createRange().parentElement();
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        par = range.commonAncestorContainer.parentNode;
    }
  }

и затем я установил границу, используя setEndAfter () ant collapse (false). Я новичок в этой области, поэтому я не уверен, что я прав. Поэтому любое предложение очень заметно. Заранее спасибо.

2 ответа
9

Беглый взгляд на раздел «Связанные» на этой самой странице даст вам сс

ылки на всю необходимую вам информацию. Таким образом, браузер (если это не Firefox) предотвращает это, и самый простой обходной путь - вставить пробел нулевой ширины (Unicode).U+200B) после вставленной<span> элемент. Помимо того, что это очень уродливый хак, у него есть проблема отслеживания и удаления этих пробелов нулевой ширины, когда они больше не нужны.

Я обновил ваш jsFiddle для использования этого подхода, но без кода для удаления пробелов нулевой ширины:

http://jsfiddle.net/VzbYJ/87/

Для справки, вот список соответствующих вопросов / ответов:

Установка позиции каретки для пустого узла внутри элемента contentEditablehttps://stackoverflow.com/a/15814297/96100Размещение каретки за пределами вставленного тега в ContentEditableУстановка позиции каретки для пустого узла внутри элемента contentEditable

Мне нужен стандартный ответ для этого, он возникает так часто ...

@TimDown О, это нормально. Я говорил гадость обо всем этом. В любом случае, это много работы. Я все еще собирался использовать contenteditable. Спасибо за совет.

от Quentin Engles

@TimDown Я думаю, что именно для этого я буду использовать его (очистка). Также клавиши со стрелками, delete и backspace теперь должны вводиться дважды с символом нулевой ширины. Так что я работаю, чтобы выяснить, как избавиться от этого.

от Quentin Engles

Тьфу. Ну что угодно. Мне нравится вызов. Возможно, если я не сойду с ума, делая это, я отправлю некоторые решения назад. Я не собираюсь поддерживать ieeee, так что, по крайней мере, мне не придется иметь дело с этим.

от Quentin Engles

@QuentinEngles: Просто чтобы прояснить ситуацию, я не говорю, что угробление может быть определенным делом. Просто это вариант, хотя и большое дело.

от Tim Down
2

Это старый пост

и это часть решения проблемы. Есть более сложные подходы, которые я еще не закончил, но простой всегда хорош.

const editor = document.querySelector('[contenteditable="true"]');
const spans = document.querySelectorAll('span[contenteditable="false"]');

Array.prototype.slice.call(spans).map(span => {
  const empty = document.createTextNode( '\uFEFF' );
  const parentEl = span.parentElement;
  const allchildnodes = editor.childNodes;
  const lastsib = allchildnodes[allchildnodes.length - 1];
  const ended = lastsib.wholeText === '\n';
  const prevsib = ended ? lastsib.previousSibling === span : false;
  if (prevsib) {
    parentEl.appendChild(empty);
  }
}); 

https://codepen.io/augur/pen/MvaKJO

Похожие вопросы