Как переместить курсор в конец контентной сущности

87

Мне нужно переместить курсор в конец contenteditableузла, как в виджете заметок Gmail.

Я читаю потоки в StackOverflow, но эти решения основаны на использовании входных данных и не работают с contenteditableэлементами.

Авсей
источник

Ответы:

28

Есть еще одна проблема.

Решение Нико Бернса работает, если contenteditablediv не содержит других многострочных элементов.

Например, если div содержит другие div, а эти другие div содержат другие элементы внутри, могут возникнуть некоторые проблемы.

Чтобы их решить, я предложил следующее решение, которое является улучшением решения Нико :

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) {

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

    //From: /programming/237104/array-containsobj-in-javascript
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    }

    //Basic idea from: /programming/19790442/test-if-an-element-can-contain-text
    function canContainText(node) {
        if(node.nodeType == 1) { //is an element node
            return !voidNodeTags.contains(node.nodeName);
        } else { //is not an element node
            return false;
        }
    };

    function getLastChildElement(el){
        var lc = el.lastChild;
        while(lc && lc.nodeType != 1) {
            if(lc.previousSibling)
                lc = lc.previousSibling;
            else
                break;
        }
        return lc;
    }

    //Based on Nico Burns's answer
    cursorManager.setEndOfContenteditable = function(contentEditableElement)
    {

        while(getLastChildElement(contentEditableElement) &&
              canContainText(getLastChildElement(contentEditableElement))) {
            contentEditableElement = getLastChildElement(contentEditableElement);
        }

        var range,selection;
        if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        {    
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
        }
        else if(document.selection)//IE 8 and lower
        { 
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        }
    }

}( window.cursorManager = window.cursorManager || {}));

Применение:

var editableDiv = document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);

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

РЕДАКТИРОВАТЬ №1 : Чтобы быть более общим, оператор while должен учитывать также все другие теги, которые не могут содержать текст. Эти элементы называются пустыми элементами , и в этом вопросе есть несколько методов, как проверить, является ли элемент недействительным. Итак, предполагая, что существует вызываемая функция, canContainTextкоторая возвращает, trueесли аргумент не является пустым элементом, следующая строка кода:

contentEditableElement.lastChild.tagName.toLowerCase() != 'br'

следует заменить на:

canContainText(getLastChildElement(contentEditableElement))

РЕДАКТИРОВАТЬ № 2 : приведенный выше код полностью обновлен, все изменения описаны и обсуждены.

Вито Джентиле
источник
Интересно, что я ожидал, что браузер позаботится об этом случае автоматически (не то чтобы я удивился, что это не так, браузеры, кажется, никогда не делают интуитивно понятные вещи с contenteditable). У вас есть пример HTML, в котором ваше решение работает, а мое - нет?
Нико Бернс
В моем коде была еще одна ошибка. Я починил это. Теперь вы можете убедиться, что мой код работает на этой странице , а ваш - нет
Вито Джентиле
Я получаю сообщение об ошибке при использовании вашей функции, сообщает консоль, Uncaught TypeError: Cannot read property 'nodeType' of nullи это связано с вызовом функции getLastChildElement. Вы знаете, что может вызвать эту проблему?
Дерек
@VitoGentile, это немного старый ответ, но я хочу заметить, что ваше решение заботится только о блочных элементах, если внутри есть встроенные элементы, тогда курсор будет расположен после этого встроенного элемента (например, span, em ...) , простое решение - рассматривать встроенные элементы как пустые теги и добавлять их в voidNodeTags, чтобы они пропускались.
medBouzid 01
243

Решение Geowa4 будет работать для текстового поля, но не для контентного элемента.

Это решение предназначено для перемещения курсора в конец содержательного элемента. Он должен работать во всех браузерах, поддерживающих contenteditable.

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}

Его можно использовать с помощью кода, подобного:

elem = document.getElementById('txt1');//This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);
Нико Бернс
источник
1
Решение geowa4 будет работать для текстовых полей в Chrome, оно не будет работать для контентных элементов в любом браузере. мой работает для содержательных элементов, но не для текстовых полей.
Нико Бернс
4
Это правильный ответ на этот вопрос, отлично, спасибо Нико.
Роб
7
selectNodeContentsЧасть Нико давал ошибки мне как в Chrome и FF (не проверял другие браузеры) , пока я не узнал, что я , видимо , нужно добавить .get(0)к элементу , который я кормил функцию. Думаю, это связано с тем, что я использую jQuery вместо простого JS? Я узнал об этом от @jwarzech на вопрос 4233265 . Спасибо всем!
Макс Старкенбург,
5
Да, функция ожидает элемент DOM, а не объект jQuery. .get(0)извлекает элемент dom, который jQuery хранит внутри. Вы также можете добавить [0], что эквивалентно .get(0)в этом контексте.
Нико Бернс,
1
@ Нико Бернс: Я попробовал ваш метод, но он не сработал в FireFox.
Льюис
26

Если вам наплевать на старые браузеры, этот помог мне.

// [optional] make sure focus is on the element
yourContentEditableElement.focus();
// select all the content in the element
document.execCommand('selectAll', false, null);
// collapse selection to the end
document.getSelection().collapseToEnd();
Juank
источник
это единственное, что у меня сработало внутри фонового скрипта для расширения Chrome
Роб
1
Это прекрасно работает. Проверено на Chrome 71.0.3578.98 и WebView на Android 5.1.
maswerdna 01
3
document.execCommandустарело сейчас developer.mozilla.org/en-US/docs/Web/API/Document/execCommand .
веб-программист
2020, и это все еще работает в Chrome версии 83.0.4103.116 (официальная сборка) (64-разрядная
версия
это победитель!
MNN TNK
8

Можно установить курсор в конец диапазона:

setCaretToEnd(target/*: HTMLDivElement*/) {
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(target);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  range.detach(); // optimization

  // set scroll to the end if multiline
  target.scrollTop = target.scrollHeight; 
}
am0wa
источник
Используя приведенный выше код, он делает свое дело, но я хочу иметь возможность перемещать курсор в любое место внутри редактируемого содержимого div и продолжать ввод с этой точки - например, пользователь обнаружил опечатку ... Как бы Я исправляю ваш код выше?
Zabs
1
@Zabs это довольно просто: не вызывайте его setCaretToEnd()каждый раз - вызывайте его только тогда, когда вам это нужно: например, после Copy-Paste или после ограничения длины сообщения.
am0wa
Это сработало для меня. после того, как пользователь выбирает тег, я перемещаю курсор в contenteditable div до конца.
Ayudh
0

У меня была аналогичная проблема при попытке сделать элемент редактируемым. Это было возможно в Chrome и FireFox, но в FireFox курсор либо переместился в начало ввода, либо на один пробел после конца ввода. Я думаю, это очень сбивает с толку конечного пользователя, пытающегося редактировать контент.

Я не нашел решения, попробовав несколько вещей. Единственное, что сработало для меня, - это «обойти проблему», поместив простой старый текстовый ввод ВНУТРИ my. Теперь это работает. Похоже, что «редактируемый контент» - это все еще передовая технология, которая может работать, а может и не работать так, как вы хотели бы, в зависимости от контекста.

Пану Логик
источник
0

Перемещение курсора в конец редактируемого диапазона в ответ на событие фокуса:

  moveCursorToEnd(el){
    if(el.innerText && document.createRange)
    {
      window.setTimeout(() =>
        {
          let selection = document.getSelection();
          let range = document.createRange();

          range.setStart(el.childNodes[0],el.innerText.length);
          range.collapse(true);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      ,1);
    }
  }

И вызываем его в обработчике событий (React here):

onFocus={(e) => this.moveCursorToEnd(e.target)}} 
Максим Саплин
источник
0

Проблема с contenteditable <div>и <span>решается, когда вы начинаете вводить его изначально. Одним из обходных путей для этого может быть запуск события focus на вашем элементе div и на этой функции, очистить и пополнить то, что уже было в элементе div. Таким образом, проблема решена, и, наконец, вы можете поместить курсор в конец, используя диапазон и выделение. Работал у меня.

  moveCursorToEnd(e : any) {
    let placeholderText = e.target.innerText;
    e.target.innerText = '';
    e.target.innerText = placeholderText;

    if(e.target.innerText && document.createRange)
    {
      let range = document.createRange();
      let selection = window.getSelection();
      range.selectNodeContents(e.target);
      range.setStart(e.target.firstChild,e.target.innerText.length);
      range.setEnd(e.target.firstChild,e.target.innerText.length);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }

В HTML-коде:

<div contentEditable="true" (focus)="moveCursorToEnd($event)"></div>
Нида
источник