Как переместить курсор в конец объекта contenteditable
-
13-09-2019 - |
Вопрос
Мне нужно переместить курсор в конец contenteditable
узел похож на виджет заметок Gmail.
Я читал потоки в StackOverflow, но эти решения основаны на использовании входных данных, и они не работают с contenteditable
элементы.
Решение
Есть и еще одна проблема.
В Нико Горитрешение работает, если contenteditable
div не содержит других многострочных элементов.
Например, если div содержит другие divs, и эти другие divs содержат внутри другие материалы, могут возникнуть некоторые проблемы.
Чтобы решить их, я предложил следующее решение, которое является улучшением Никоэто один:
//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: https://stackoverflow.com/questions/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: https://stackoverflow.com/questions/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
если аргумент не является элементом void, то следующая строка кода:
contentEditableElement.lastChild.tagName.toLowerCase() != 'br'
следует заменить на:
canContainText(getLastChildElement(contentEditableElement))
ПРАВКА № 2:Приведенный выше код полностью обновлен, с описанием и обсуждением всех изменений
Другие советы
Решение Geowa4 будет работать для текстовой области, но не для элемента contenteditable.
Это решение предназначено для перемещения курсора в конец элемента contenteditable.Это должно работать во всех браузерах, которые поддерживают 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);
Если вас не волнуют старые браузеры, то этот сделал свое дело за меня.
// [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();
Это можно сделать, установив курсор в конец диапазона:
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;
}
У меня была похожая проблема, когда я пытался сделать элемент доступным для редактирования.Это было возможно в Chrome и FireFox, но в FireFox курсор либо перемещался в начало ввода, либо через один пробел после окончания ввода.Я думаю, что попытка отредактировать контент очень сбивает с толку конечного пользователя.
Я не нашел решения, попробовав несколько вещей.Единственное, что у меня сработало, - это "обойти проблему", поместив обычный старый текстовый ввод В мой .Теперь это работает.Похоже, что "редактируемый контент" по-прежнему является передовой технологией, которая может работать так, как вы хотели бы, а может и не работать, в зависимости от контекста.
Перемещение курсора в конец редактируемого диапазона в ответ на событие фокусировки:
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);
}
}
И вызываем его в обработчике событий (Реагируем здесь):
onFocus={(e) => this.moveCursorToEnd(e.target)}}