Блог

Я пытаюсь создать редактор, используя JavaScript. Я хочу показать количество строк, например, 1,2,3, при изменении строки при нажатии enter. Я подсчитал изменение строки при нажатии enter, но возникает проблема, я постоянно нажимаю enter, затем последовательность изменения строки, например 1,2, 12, поскольку событие нажатия клавиши не работает в то время из-за непрерывного нажатия.

Я использую текстовую область в html

     <div class="editor-flex">
        <div id="editor-numbering">
            <div>1</div>
        </div>
        <div class="editor-block">
            <textarea name="text" id="editor"></textarea>
        </div>
        <div class="output">
            Preview
        </div>
    </div>
 

main.js файл здесь div создается для хранения новой строки

 let editor =  document.getElementById("editor")
let editorNumbering = document.querySelector('#editor-numbering')
let len =1;

editor.addEventListener('keyup', (event) => {
    // console.log(editor.value)
    let lenNew =  editor.value.split('n').length //count line change
    console.log(len)
    if(len!=lenNew)
    {    
        let  div = document.createElement('div')
        div.textContent = len 1
        console.log(div)
        editorNumbering.append(div)
    }
    len = lenNew
    console.log(len)

})
 

Ожидаемый результат — непрерывное количество строк, как в любом другом редакторе, который показывает результат 1,2,3, при изменении строки нажатие клавиши enter непрерывно или одиночное

Я не знаю, что вы подразумеваете под непрерывным нажатием enter? Может быть, вы можете использовать keydown событие вместо keyup :

 let editor =  document.getElementById("editor")
let editorNumbering = document.querySelector('#editor-numbering')
let len =1;

editor.addEventListener('keydown', (event) => {
    // console.log(editor.value)
    let lenNew =  editor.value.split('n').length //count line change
    //console.log(len)
    if(len!=lenNew)
    {    
        let  div = document.createElement('div')
        div.textContent = len 1
        //console.log(div)
        editorNumbering.append(div)
    }
    len = lenNew
    //console.log(len)

}) 

 <textarea id="editor"></textarea>
<div id="editor-numbering"></div>