Курсор не следует за отступом текста после удаления элемента в

⇐ Javascript

Ответить

1 сообщение • Страница 1 из 1

Anonymous

Курсор не следует за отступом текста после удаления элемента в

Цитата

Сообщение Anonymous » 24 янв 2025, 23:32

html: < /p>

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

CSS:

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

h1 {
border: 1px black solid;
outline: none;
text-indent: 36px;
}

h1:empty::before {
content: attr(placeholder);
color: grey;
}
< /code>
js: < /p>
const h1 = document.querySelector('h1');

h1.addEventListener('input', () => {
if (h1.textContent !== '') return;

let elemToDel = [];

for (let i of h1.children) {
elemToDel.push(i);
}

elemToDel.forEach(i => i.remove());
});

https://jsfiddle.net/5fnvztsg/
Код JS предназначен для удаления оставшихся символов новой строки, когда h1.textContent пуст, чтобы :empty::before применяется.
Однако нажатие Enter при отсутствии текста (за исключением ::before) приводит к тому, что курсор, по-видимому, игнорирует текстовый отступ, хотя при вводе текста что-нибудь, а затем нажать введите, а затем удалив новую строку и набранный текст, кажется, снова помещает его в нужное место.
Я написал это:

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

const caretPos = window.getSelection();
const range = document.createRange();

range.selectNodeContents(h1);
range.collapse(false);

caretPos.removeAllRanges();
caretPos.addRange(range);
< /code>
сразу после "elemtodel.foreach (i => i.Remove ());" но это, похоже, не сработало. < /p>
Я также пытался: < /p>
h1.textContent = ' ';

после "elemToDel.forEach(i => i.remove());" что устранило проблему с кареткой, но за счет удаления ::before.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ment-in-h1

1737750779

Anonymous

 html: < /p>
[code]
[/code]
CSS:
[code]h1 {
border: 1px black solid;
outline: none;
text-indent: 36px;
}

h1:empty::before {
content: attr(placeholder);
color: grey;
}
< /code>
js: < /p>
const h1 = document.querySelector('h1');

h1.addEventListener('input', () => {
if (h1.textContent !== '') return;

let elemToDel = [];

for (let i of h1.children) {
elemToDel.push(i);
}

elemToDel.forEach(i => i.remove());
});
[/code]
https://jsfiddle.net/5fnvztsg/
Код JS предназначен для удаления оставшихся символов новой строки, когда h1.textContent пуст, чтобы :empty::before применяется.
Однако нажатие Enter при отсутствии текста (за исключением ::before) приводит к тому, что курсор, по-видимому, игнорирует текстовый отступ, хотя при вводе текста что-нибудь, а затем нажать введите, а затем удалив новую строку и набранный текст, кажется, снова помещает его в нужное место.
Я написал это:
[code]const caretPos = window.getSelection();
const range = document.createRange();

range.selectNodeContents(h1);
range.collapse(false);

caretPos.removeAllRanges();
caretPos.addRange(range);
< /code>
сразу после "elemtodel.foreach (i => i.Remove ());" но это, похоже, не сработало. < /p>
Я также пытался: < /p>
h1.textContent = ' ';
[/code]
после "elemToDel.forEach(i => i.remove());" что устранило проблему с кареткой, но за счет удаления ::before. 

Подробнее здесь: [url]https://stackoverflow.com/questions/79385558/caret-doesnt-follow-text-indent-after-deleting-element-in-h1[/url]