Мне нужно переместить курсор в конец contenteditable
узла, как в виджете заметок Gmail.
Я читаю потоки в StackOverflow, но эти решения основаны на использовании входных данных и не работают с contenteditable
элементами.
Мне нужно переместить курсор в конец contenteditable
узла, как в виджете заметок Gmail.
Я читаю потоки в StackOverflow, но эти решения основаны на использовании входных данных и не работают с contenteditable
элементами.
Есть еще одна проблема.
Решение Нико Бернса работает, если contenteditable
div не содержит других многострочных элементов.
Например, если 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 : приведенный выше код полностью обновлен, все изменения описаны и обсуждены.
Uncaught TypeError: Cannot read property 'nodeType' of null
и это связано с вызовом функции getLastChildElement. Вы знаете, что может вызвать эту проблему?Решение 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);
источник
selectNodeContents
Часть Нико давал ошибки мне как в Chrome и FF (не проверял другие браузеры) , пока я не узнал, что я , видимо , нужно добавить.get(0)
к элементу , который я кормил функцию. Думаю, это связано с тем, что я использую jQuery вместо простого JS? Я узнал об этом от @jwarzech на вопрос 4233265 . Спасибо всем!.get(0)
извлекает элемент dom, который jQuery хранит внутри. Вы также можете добавить[0]
, что эквивалентно.get(0)
в этом контексте.Если вам наплевать на старые браузеры, этот помог мне.
// [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();
источник
document.execCommand
устарело сейчас developer.mozilla.org/en-US/docs/Web/API/Document/execCommand .Можно установить курсор в конец диапазона:
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; }
источник
setCaretToEnd()
каждый раз - вызывайте его только тогда, когда вам это нужно: например, после Copy-Paste или после ограничения длины сообщения.У меня была аналогичная проблема при попытке сделать элемент редактируемым. Это было возможно в Chrome и FireFox, но в FireFox курсор либо переместился в начало ввода, либо на один пробел после конца ввода. Я думаю, это очень сбивает с толку конечного пользователя, пытающегося редактировать контент.
Я не нашел решения, попробовав несколько вещей. Единственное, что сработало для меня, - это «обойти проблему», поместив простой старый текстовый ввод ВНУТРИ my. Теперь это работает. Похоже, что «редактируемый контент» - это все еще передовая технология, которая может работать, а может и не работать так, как вы хотели бы, в зависимости от контекста.
источник
Перемещение курсора в конец редактируемого диапазона в ответ на событие фокуса:
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)}}
источник
Проблема с
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>
источник