При выборе не отображается пересечение линий [закрыто] ⇐ Javascript

[Anonymous]

Изменить: после изучения поведения на других сайтах поведение кажется стандартным. По моему мнению, это не блестящий результат, но такое поведение имеет смысл, поскольку курсор перемещается к началу строки в каждом направлении, и поэтому, по крайней мере, при движении вперед с помощью ltr, нет места для выделения. Рад, что ты отпустил это. Спасибо за терпение.
==================
Я пытаюсь убедиться, что пользователь может правильно выделять текст и отступать от выбранных строк. К сожалению, визуально не ясно, применено ли выделение к одной строке или к двум. Это может быть проблема CSS или проблема программирования. Я изучу выбор стилей, однако, поскольку это сообщество полезных профессионалов, я решил написать этот пост.
Вот MRE:

• Напишите две строки (разделенные возвратом каретки).
• В середине второй строки начните обратный выбор.

Результат: вы должны увидеть, что курсор перемещается на следующую строку от журналы, но пользовательский интерфейс не дает этого понять.

Код: Выделить всё

const editor = document.getElementById('editor');
const displayHTMLTag = document.getElementById('innerHTML');
const anchorTag = document.getElementById('anchor');
const focusTag = document.getElementById('focus');
const boolTag = document.getElementById('bool');
const selection = window.getSelection();

function isSelectionStartEqualToSelectionEnd(selection) {
if (selection.direction !== "none") {
addTextContent(anchorTag, selection.anchorNode.textContent)
addTextContent(focusTag, selection.focusNode.textContent)
addTextContent(boolTag, selection.anchorNode === selection.focusNode) // logs previous line when selection appears to highlight second line
return selection.anchorNode === selection.focusNode; // retusrn false when line only highlights second line
}
}

function addTextContent(el, str) {
el.textContent = str;
}

editor.addEventListener("keyup", (event) => {
addTextContent(displayHTMLTag, event.target.innerHTML);
isSelectionStartEqualToSelectionEnd(selection);
});
editor.addEventListener("mouseup", (event) => {
isSelectionStartEqualToSelectionEnd(selection)
});

Код: Выделить всё

MRE - selection doesn't display line crossover

.spacer {
margin: 3rem;
}
.grid {
display: grid;
}
.flex {
display: flex;
}

.editor-styles {
max-width: 30rem;
margin-inline: auto;
border: 2px solid grey;
padding: 0.5rem;
}






Inner html:

anchor node:

focus node:

Are nodes same:

Подробнее здесь: https://stackoverflow.com/questions/798 ... -crossover