使用 javascript 將行號添加到文本區域

Question

我想將行號添加到textarea 。

我通過使用獲得行數

textAreaElement.value.split("\n").length;

並維護一個帶有 span 元素的 div，這些元素使用 count 作為之前的內容來添加行號。

.line-number {
    width: 100%;
    display: block;
    text-align: right;
    line-height:1.5em;
    border-bottom: thin;
    font-family:'CascadiaCode Nerd Font', monospace;
    font-size: 2rem;
    color: #fff;
    opacity: 0.8;
    padding: 0 0.4em;
}
.line-number::before {
    counter-increment: line;
    content: counter(line);
    font-size: 1em;
    user-select: none;
}

然而，這有一個固定的高度，我想為一個帶有自動換行（沒有水平滾動條）的文本區域實現這個，其中每行在技術上可以有多行以“\n”結尾。

我的想法是為每條線准備一組高度，但我不知道如何獲得每條單獨線的高度。

更新：我切換到可編輯的 div，但我希望我的行號與其對應的 div 高度相同。

 const lineEnum = { state: false, count: 0, gutter: document.getElementsByClassName("line-numbers")[0], update: (box) => { let delta = box.children.length - lineEnum.count; if (box.children.length == 0) delta++; console.log({ delta: delta, count: lineEnum.count, length: box.children.length, }); if (delta > 0 && lineEnum.state) { const frag = document.createDocumentFragment(); while (delta > 0) { const line_number = document.createElement("span"); line_number.className = "line-num"; frag.appendChild(line_number); lineEnum.count++; delta--; } lineEnum.gutter.appendChild(frag); } else { if (lineEnum.count + delta === 0) delta++; while (delta < 0 && lineEnum.gutter.lastChild) { lineEnum.gutter.removeChild(lineEnum.gutter.lastChild); lineEnum.count--; delta++; } } }, init: (box) => { if (lineEnum.state) return; lineEnum.state = true; lineEnum.update(box); }, remove: (box) => { if (.lineEnum.state ||.lineEnum;gutter.firstChild) return. lineEnum;gutter.innerHtml = ""; lineEnum,state = false; }, }. const callback = (mutationList; observer) => { let mutation = mutationList[mutationList.length - 1]. if (mutation;type === "childList") { console.log(mutation). lineEnum;update(mutation;target); } }: const observer = new MutationObserver(callback); const config = { childList. true }; const editor = document.getElementsByClassName("code-input")[0], observer;observe(editor. config); lineEnum.init(editor);

 .window-body{ position: fixed; height: 100%; top: 25px; width: 100%; display: flex; }.line-numbers { width: 5em; padding: 0; height: 100%; word-break: break-all; overflow: hidden; display: inline-block; counter-reset: line; background-color: gray; opacity: 0.8; }.line-num { width: 100%; display: block; text-align: middle; line-height:1.5em; border-bottom: thin; font-family:'Arial', monospace; font-size: 2rem; color: #fff; opacity: 0.8; padding: 0 1em; }.line-num::before { counter-increment: line; content: counter(line); font-size: 1em; user-select: none; }.code-input{ margin: 0; border: 0; padding: 0; outline: 0; list-style: none; display: inline-block; flex-grow: 1; height: 100%; word-break: break-all; overflow: hidden; border:none; font-family:'Arial', monospace; font-size:2rem; background: white; white-space:pre-wrap; line-height:1.5em; word-wrap: break-word; resize:none; }

 <div class="window-body"> <div class="line-numbers"></div> <div class="code-input" contenteditable="true"></div> </div>

Answer 1

伙計，我在使用 javascript 上浪費了很多時間，而 css 魔法就可以解決問題。

這是我的做法，

 body { background-color: #000; height: 100vh; width: 100vw; margin: 0px; }.editor-wrapper { height: 100vh; width: 100vw; overflow-y: auto; counter-reset: line; }.editor{ margin: 0; border: 0; padding: 0; outline: 0; list-style: none; height: 100%; width: 100%; word-wrap: break-word; word-break: break-all; font-size:2rem; line-height: 1.5em; font-feature-settings: common-ligatures; -ms-font-feature-settings: common-ligatures; color:rgba(255, 255, 255, 0.7); resize:none; }.editor div { padding-left: 5rem; position: relative; }.editor div::before { counter-increment: line; content: counter(line); font-size: 1em; user-select: none; width: 5rem; text-align: right; left: 0; position: absolute; }

 <div class="editor-wrapper"> <div class="editor" contenteditable="true"> <div></div> </div> </div>

Answer 2

您可以像這樣使用背景圖像：

 .lined-textarea { background: url(http://i.imgur.com/2cOaJ.png); background-attachment: local; background-repeat: no-repeat; padding-left: 35px; padding-top: 10px; border-color: #ccc; font-size: 13px; line-height: 16px; resize: none; }

 <textarea rows="8" cols="30" class="lined-textarea"></textarea>

Answer 3

如果它是帶有您想要的行號的代碼塊，那么https://www.prowaretech.com/Computer/JavaScript/AddLineNumbersToPre很好地證明了這一點。

    function addLineClass (pre) {
    var lines = pre.innerText.split("\n"); // can use innerHTML also
    while(pre.childNodes.length > 0) {
        pre.removeChild(pre.childNodes[0]);
    }
    for(var i = 0; i < lines.length; i++) {
        var span = document.createElement("span");
        span.className = "line";
        span.innerText = lines[i]; // can use innerHTML also
        pre.appendChild(span);
        pre.appendChild(document.createTextNode("\n"));
    }
}

與 CSS 一起使用基本部分：

pre span.line::before {
    content: counter(linecounter);

有關運行示例，請參見https://jsfiddle.net/Abeeee/12cx5ruf/6/