I’m having trouble switching from using a <textarea> to a div with contenteditable=”true”. I created a vertical column in which all the numbers of the rows corresponding to a text editor are counted. Previously the row numbers were connected to a <textarea>, so I was able to correctly get what I wanted (e.g. like this code).
MY PROBLEM. Now, for several technical reasons, i had to give up the <textarea> and use a new div with contenteditable=”true”, then i removed the <textarea>, but using partly almost the same code. The problem now is that, since i no longer have <textarea>, i can’t count the rows of the new div with contenteditable. My Javascript code was set to run on a <textarea>. Now i would like to modify it to make the same code work even on a div.
Currently (with the snippet code) I get this:
MY ATTEMPTS AT A SOLUTION
I think my Javascript code (which uses 2 different ways) is good enough and maybe just needs a few changes, but i can’t link it with new div. Now i would like to modify it to make the same code work even on a div, so i changed the query selector from textarea to .hilite-editor, converting the query selector to to grab:
BEFORE: const textarea = document.querySelector("textarea");
NOW: textarea = document.querySelector(".hilite-editor")
Considering that textarea is a form field and div is an html element, i modified it so that i don’t access its contents via value, but by accessing it with Html
BEFORE: const num = textarea.value.split("n").length;
NOW: const num = textarea.innerHTML.split("n").length;
I also tried replacing textarea.value.substring with textarea.innerHTML.substring.
But despite these changes, it still doesn’t work.Sorry, I’m new to Javascript and still learning. How can I display the line numbers of the div (and no longer of the textarea)? I would like to get this:
Complete code
const textarea = document.querySelector("textarea");
const numbers = document.querySelector(".numbers");
//VIEW DIRECTLY (WITHOUT PRESSING A BUTTON)
function updateLineNumbers() {
const num = textarea.value.split("n").length;
numbers.innerHTML = Array(num).fill("<span></span>").join("");
}
// Update line numbers when the page loads
updateLineNumbers();
// Update line numbers when the textarea content changes
textarea.addEventListener("input", updateLineNumbers);
/////////////////////////////////////////////////////////////////
// WHEN I PRESS KEY
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();
}
});
/* EDITOR CODE */
/* Scrollbars */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 0px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 1rem;
}
.hilite {
position: relative;
background: #1e1e1e;
height: 120px;
overflow: auto;
width: 100%;
height: 100%;
}
.hilite-colors code,
.hilite-editor {
padding: 1rem !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
white-space: pre-wrap;
font: 13px/1.4 monospace;
width: 100%;
background: transparent;
border: 0;
outline: 0;
}
/* THE OVERLAYING CONTENTEDITABLE WITH TRANSPARENT TEXT */
.hilite-editor {
display: inline-block;
position: relative;
color: white;
caret-color: hsl( 50, 75%, 70%); /* But keep caret visible */
width: 100%;
}
.hilite-editor:focus {
outline: transparent;
}
.hilite-editor::selection {
background: hsla(0, 100%, 75%, 0.2);
}
/* THE UNDERLAYING DIV WITH HIGHLIGHT COLORS */
.hilite-colors {
position: absolute;
user-select: none;
width: 100%;
}
/* COUNT NUMBER ROW */
.editor {
display: inline-grid;
grid-template-columns: 3em auto;
gap: 10px;
line-height: 21px;
border-radius: 2px;
overflow-y: auto;
width: 100%;
}
.editor>* {
padding-top: 10px;
padding-bottom: 10px;
}
.numbers {
text-align: right;
background: #333;
/* padding-right: 20px; */
width: 35px;
height: 200px;
/* margin-right: 71px; */
}
.numbers span {
counter-increment: linenumber;
}
.numbers span::before {
content: counter(linenumber);
display: block;
color: #888;
}
/* Tabs */
.content {
display: none;
padding: 0;
}
.content--active {
display: flex;
height: 200px;
width: 800px;
}
h1 {
margin-bottom: 0.5em;
font-weight: 700;
}
p {
font-weight: 300;
}
<div class="content content--active">
<div class="numbers">
<span></span>
</div>
<div class="hilite">
<pre class="hilite-colors"><code class="language-html"></code></pre>
<div
data-lang="html"
class="hilite-editor"
contenteditable="true"
spellcheck="false"
autocorrect="off"
autocapitalize="off"
>TEST 1
TEST 2
TEST 3
</div>
</div>
</div>
