在 JavaScript 中连续按下回车键时编辑器未显示正确的行号?
Editor in not showing correct line number when enter key pressed continuously in JavaScript?
我正在尝试使用 JavaScript 构建编辑器。我想在按回车键时显示行数,如 1、2、3 行更改。当按下回车键时我确实计算了换行但是问题出现了我连续按下回车然后换行顺序如 1,2,12 因为 keyup 事件当时不起作用因为连续按下。
我在 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 的任何其他编辑器中的连续行数,当行更改时连续按回车键或单个
我不知道你所说的连续按回车是什么意思?也许,您可以使用 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>
我正在尝试使用 JavaScript 构建编辑器。我想在按回车键时显示行数,如 1、2、3 行更改。当按下回车键时我确实计算了换行但是问题出现了我连续按下回车然后换行顺序如 1,2,12 因为 keyup 事件当时不起作用因为连续按下。
我在 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 的任何其他编辑器中的连续行数,当行更改时连续按回车键或单个
我不知道你所说的连续按回车是什么意思?也许,您可以使用 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>