Обновить номера строк Textarea ⇐ CSS

[Anonymous]

Я делаю вертикальную полосу, которая считает количество строк при создании рядов. Есть 2 способа подсчета строк: Первый способ - нажать клавишу (AddEventListener («KeyDown»), чтобы создать строку. Это происходит правильно. Другой путь, который мне нужен для вопроса, заключается в том, чтобы напрямую отображать все номера строк, как только я открываю веб -страницу. Вместо этого текст в 3 строки, как только я открываю веб -страницу только 1 строка. Я бы хотел. src = "https://i.sstatic.net/dpmbj.png"/>
Как я могу это добиться?

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

//VIEW DIRECTLY (WITHOUT PRESSING A BUTTON)
const start2 = textarea.selectionStart;
const end2 = textarea.selectionEnd;

textarea.value =
textarea.value.substring(0, start2) +
"\t" +
textarea.value.substring(end2);
< /code>
Полный код: < /p>


const textarea = document.querySelector("textarea");
const numbers = document.querySelector(".numbers");

//WHEN I PRESS KEY
textarea.addEventListener("keyup", (e) => {
const num = e.target.value.split("\n").length;
numbers.innerHTML = Array(num).fill("").join("");
});

textarea.addEventListener("keydown", (event) => {
if (event.key === "Tab") {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;

textarea.value =
textarea.value.substring(0, start) +
"\t" +
textarea.value.substring(end);

event.preventDefault();
}
})

//VIEW DIRECTLY (WITHOUT PRESSING A BUTTON)
const start2 = textarea.selectionStart;
const end2 = textarea.selectionEnd;

textarea.value =
textarea.value.substring(0, start2) +
"\t" +
textarea.value.substring(end2);< /code>
.editor {
display: inline-grid;
grid-template-columns: 3em auto;
gap: 10px;
line-height: 21px;
border-radius: 2px;
overflow-y: auto;
width: 100%; 3 schermateeeeeeeeeeeeeeee */
}

.editor>* {
padding-top: 10px;
padding-bottom: 10px;
}

.numbers {
text-align: right;
background: #333;
padding-right: 5px;
height: 150px;
}

.numbers span {
counter-increment: linenumber;
}

.numbers span::before {
content: counter(linenumber);
display: block;
color: #888;
}

textarea {
line-height: 21px;
border: 0;
background: transparent;
color: #fff;
min-width: 500px;
outline: none;
resize: none;
padding-right: 10px;
}

textarea::placeholder{
color: red;
}

textarea{
background-color: black;
color: green;
}< /code>




Test 1
Test 2
Test 3

Подробнее здесь: https://stackoverflow.com/questions/778 ... ne-numbers