我正在制作一个竖线，它在创建行时对行数进行计数.有两种方法来计算行数:第一种方法是按下一个键(addEventListener("keydown")来创建一行.这是正确的.另一种方法是，我一打开网页就直接显示所有行号，这也是我回答问题所需要的.
PROBLEM.问题是行数没有在我打开网页时立即显示.例如，如果我有3行文本，只要我打开网页，只有1行被检测到.相反，我希望它能直接显示，当我打开的网页，有3行.问题看起来像这样:
WHAT I WOULD LIKE.我想实现这一点，同时也能够通过按下按钮来计算行数(就像我在代码中已经做的那样)，但我不想在这两种方式之间遇到冲突.我想在打开网页时(不按任何按钮)得到这个:
我如何才能做到这一点？我正在使用这个，但它不起作用(我是JavaScript新手，对不起):
//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);
完整代码:
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("<span></span>").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);.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;
}<div class="code-area editor">
<div class="numbers">
<span></span>
</div>
<textarea id="htmlCode" placeholder="HTML" placeholder="PROVA" wrap="off">Test 1
Test 2
Test 3</textarea>
</div>
</div>