时间戳

首页 > 解决方案 > 在 JavaScript 中连续按下输入键时编辑器没有显示正确的行号？

javascript - 在 JavaScript 中连续按下输入键时编辑器没有显示正确的行号？

问题描述

我正在尝试使用 JavaScript 构建编辑器。我想在按 Enter 时显示行数，如 1、2、3 行更改。按下回车时我确实计算了换行但是出现了问题我连续按下回车然后换行的顺序像 1,2,12 因为 keyup 事件当时不起作用，因为连续按下。

我在 html 中使用 textarea

    <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 键

标签： javascripthtmleditorkeyevent

解决方案

我不知道你说的连续输入是什么意思？也许，您可以使用keydownevent 而不是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>

推荐阅读