我试图突出显示编号div上当前活动的行。我能够得到当前行触发的插入符号的活动在textarea。然而，我无法有效地使用这些信息来操作我的编号div中活动行周围的css背景。
我尝试了以下代码，但它不工作。
我该如何解决这个问题？
const ta = document.querySelector('textarea')
function updateRowNumbering() {
const num = ta.value.split("\n").length;
const numbers = ta.parentNode.querySelector(".numbers");
numbers.innerHTML = Array(num).fill(`<span style="overflow: hidden"></span>`).join("");
}
ta.textContent = `I love
Tanzania
Nasila
America
Football
JavaScript
Chess
Ang Probinsyano
Startimes
China`
updateRowNumbering();
function getCurrentLineNumber() {
// Get the caret's position in the textarea.
const caretPosition = document.querySelector('#textarea').selectionStart;
// Get the text of the textarea.
const text = document.querySelector('#textarea').value;
// Split the text into lines.
const accumulativeArray = [0];
// Iterate over the lines of the text and add the length of each line to the accumulative array.
const lines = text.split('\n');
for (let i = 0; i < lines.length; i++) {
accumulativeArray.push(accumulativeArray[i] + lines[i].length+1);
}
// Find the index in the accumulative array where the value is greater than or equal to the caret position, taking into account the case where the caret position is less than the immediately greater accumulation.
let lineNumber = accumulativeArray.findIndex(value => value > caretPosition);
return /*caretPosition/*/lineNumber//+`caretPosition`+accumulativeArray//lines.length - 1;
}
function highlightLineNumber(lineNumber) {
// Get the numbering div element.
const numberingDiv = document.querySelectorAll('.editor > .numbers > span');
// Get the span element that corresponds to the given line number.
const lineNumberSpan = numberingDiv[lineNumber-1]
lineNumberSpan.style.backgroundColor = 'gray';
}
//user clicked on in the line corresponding with numbering div:
const numbersBG = document.querySelector('#textarea');
numbersBG.addEventListener('click', function(event) {
// Get the line number that the user clicked on.
const currentlinenumber = getCurrentLineNumber()
// Highlight gray backgraound on the respective region with the same number found;
highlightLineNumber(currentlinenumber)
});body,
textarea {
font-family: Consolas, "Courier New", Courier, monospace;
}
.editor {
display: inline-grid;
grid-template-columns: 3em auto;
gap: 10px;
line-height: 21px;
background: rgb(40 42 58);
border-radius: 2px;
overflow-y: auto;
max-height: 243px;
}
.editor>* {
padding-top: 10px;
padding-bottom: 10px;
}
.numbers {
text-align: right;
background: #333;
padding-right: 5px;
}
.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;
}<body>
<div class="editor">
<div class="numbers">
<span></span>
</div>
<textarea wrap="off" id="textarea" rows="10" cols="50" onkeyup="updateRowNumbering(this)" ></textarea>
</div>
</body>
1条答案
按热度按时间vc9ivgsu1#
如果我在应用背景的地方添加
lineNumberSpan.style.display = 'block';，我将得到明显突出显示的数字。虽然它似乎只在点击时起作用，但在用箭头键移动时不起作用。此外，当单击文本区域中的另一行时，样式不会被带走。这就是你想要的吗否则，你需要进一步开发你的js。