Сохраните текстовый выбор в contenteditable при взаимодействии с jQuery Диалогового окна UI и ввода текста
У меня есть диалоговое окно jQuery для того, чтобы сделать ссылки в промежутке contentEditable. Проблема состоит в том, что нажатие кнопки для открытия диалогового окна заставляет выбор быть потерянным, ввод текста в диалоговом окне также заставляет выбор быть потерянным.
Я могу починить кнопку с-moz-user-select:none;, но-webkit-user-select:none не работает в Chrome.
Я могу зафиксировать вход путем обертывания его в iframe, но это грязно и нажимает где-либо еще, также уничтожает выбор, например, перетаскивая диалоговое окно вокруг.
Я видел решение в том, Как сохранить текстовый выбор при открытии диалогового окна jQuery, но это не работает во многих браузерах в contenteditable элементе, только реальные исходные данные.
Существует ли хорошее решение моей проблемы?
1 ответ
Вы можете сохранять и восстанавливать выбор, используя простые функции, такие как следующие, когда диалоговое окно открывается и закрывается. Я недостаточно знаком с диалоговыми окнами jQuery, чтобы знать механизм подключения к открытию и закрытию диалогового окна. Первый, saveSelection , возвращает вам объект Range или TextRange , который вы должны сохранить в переменной, которую вы позже передадите в restoreSelection :
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}