文本区域旁边异常显示的行号

Question

我正在制作一个文本编辑器，代码如下：-

const editor = document.querySelector('#ta');
const lc = document.querySelector('#line-count');
var lcDiv = document.createElement('p');
var calculateContentHeight = function( ta, scanAmount ) {
    var origHeight = ta.style.height,
        height = ta.offsetHeight,
        scrollHeight = ta.scrollHeight,
        overflow = ta.style.overflow;
    /// only bother if the ta is bigger than content
    if ( height >= scrollHeight ) {
        /// check that our browser supports changing dimension
        /// calculations mid-way through a function call...
        ta.style.height = (height + scanAmount) + 'px';
        /// because the scrollbar can cause calculation problems
        ta.style.overflow = 'hidden';
        /// by checking that scrollHeight has updated
        if ( scrollHeight < ta.scrollHeight ) {
            /// now try and scan the ta's height downwards
            /// until scrollHeight becomes larger than height
            while (ta.offsetHeight >= ta.scrollHeight) {
                ta.style.height = (height -= scanAmount)+'px';
            }
            /// be more specific to get the exact height
            while (ta.offsetHeight < ta.scrollHeight) {
                ta.style.height = (height++)+'px';
            }
            /// reset the ta back to it's original height
            ta.style.height = origHeight;
            /// put the overflow back
            ta.style.overflow = overflow;
            return height;
        }
    } else {
        return scrollHeight;
    }
}

var calculateHeight = function() {
    var ta = document.getElementById("ta"),
        style = (window.getComputedStyle) ?
            window.getComputedStyle(ta) : ta.currentStyle,

        // This will get the line-height only if it is set in the css,
        // otherwise it's "normal"
        taLineHeight = parseInt(style.lineHeight, 10),
        // Get the scroll height of the textarea
        taHeight = calculateContentHeight(ta, taLineHeight),
        // calculate the number of lines
        numberOfLines = Math.ceil(taHeight / taLineHeight);
            for(let i = 1; i < numberOfLines; i++){
                lcDiv = document.createElement('p');
                lcDiv.id = 'lcDiv';
                lcDiv.innerHTML = i;
                lc.appendChild(lcDiv);
            }
};

calculateHeight();
if (ta.addEventListener) {
    ta.addEventListener("mouseup", calculateHeight, false);
    ta.addEventListener("keyup", calculateHeight, false);
} else if (ta.attachEvent) { // IE
    ta.attachEvent("onmouseup", calculateHeight);
    ta.attachEvent("onkeyup", calculateHeight);
}

#ta{
    resize: none;
    width: 95%;
    line-height: 5vh;
    height: 90vh;
    background-color :#4C5760;
    color: #EFD09E;
    font-size: 5vh;
    float: left;
}
#line-count{
    float: left;
}

  <div id="line-count"></div>
 <textarea id="ta"></textarea>

我原以为它会在形成新行时添加行号。但它似乎没有超过 1，当我添加字母时，这个过程会重复。谁能解决这个问题。我希望它会像 Atom、Visual Studio Code 等文本编辑器一样以通常的方式显示行号。已接受帮助和答案。

Answer 1

每次调用 calculateHeight()

时都需要清除 #line-count

const editor = document.querySelector('#ta');
const lc = document.querySelector('#line-count');
var lcDiv = document.createElement('div');
var calculateContentHeight = function(ta, scanAmount) {
  var origHeight = ta.style.height,
    height = ta.offsetHeight,
    scrollHeight = ta.scrollHeight,
    overflow = ta.style.overflow;
  /// only bother if the ta is bigger than content
  if (height >= scrollHeight) {
    /// check that our browser supports changing dimension
    /// calculations mid-way through a function call...
    ta.style.height = (height + scanAmount) + 'px';
    /// because the scrollbar can cause calculation problems
    ta.style.overflow = 'hidden';
    /// by checking that scrollHeight has updated
    if (scrollHeight < ta.scrollHeight) {
      /// now try and scan the ta's height downwards
      /// until scrollHeight becomes larger than height
      while (ta.offsetHeight >= ta.scrollHeight) {
        ta.style.height = (height -= scanAmount) + 'px';
      }
      /// be more specific to get the exact height
      while (ta.offsetHeight < ta.scrollHeight) {
        ta.style.height = (height++) + 'px';
      }
      /// reset the ta back to it's original height
      ta.style.height = origHeight;
      /// put the overflow back
      ta.style.overflow = overflow;
      return height;
    }
  } else {
    return scrollHeight;
  }
}

var calculateHeight = function() {
  var ta = document.getElementById("ta"),
    style = (window.getComputedStyle) ?
    window.getComputedStyle(ta) : ta.currentStyle,

    // This will get the line-height only if it is set in the css,
    // otherwise it's "normal"
    taLineHeight = parseInt(style.lineHeight, 10),
    // Get the scroll height of the textarea
    taHeight = calculateContentHeight(ta, taLineHeight),
    // calculate the number of lines
    numberOfLines = Math.ceil(taHeight / taLineHeight);
  lc.innerHTML = "";
  for (let i = 1; i < numberOfLines; i++) {
    lcDiv = document.createElement('p');
    lcDiv.id = 'lcDiv';
    lcDiv.innerHTML = i;
    lc.appendChild(lcDiv);
  }
};

calculateHeight();
if (ta.addEventListener) {
  ta.addEventListener("mouseup", calculateHeight, false);
  ta.addEventListener("keyup", calculateHeight, false);
} else if (ta.attachEvent) { // IE
  ta.attachEvent("onmouseup", calculateHeight);
  ta.attachEvent("onkeyup", calculateHeight);
}

#ta {
  resize: none;
  width: 95%;
  line-height: 5vh;
  height: 90vh;
  background-color: #4C5760;
  color: #EFD09E;
  font-size: 5vh;
  float: left;
}

#line-count {
  float: left;
}

#line-count p {
  margin: 0;
  font-size: 5vh;
}

<div id="line-count"></div>
<textarea id="ta"></textarea>

文本区域旁边异常显示的行号

Line numbers shown unusually beside textarea

html

javascript

textarea