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

讨厌书呆子

我正在做一个文本编辑器,这是代码:-

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等文本编辑器。将接受帮助和答案。

尼丁·约瑟夫

#line-count每次致电时都需要清除calculateHeight()

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在文本区域显示文本

来自分类Dev

在文本区域旁边显示一个对话框,没有弹出框或警报框

来自分类Dev

如果选择了选项,则显示文本区域

来自分类Dev

快速突出显示文本区域

来自分类Dev

如何显示文本区域以供查看?

来自分类Dev

在文本区域中显示选定的选项

来自分类Dev

反向显示文本区域中的行

来自分类Dev

角度:在文本区域内显示文本区域字符数

来自分类Dev

在文本区域中显示所选文本

来自分类Dev

如何在文本区域显示特定文本?

来自分类Dev

如何在文本区域中显示所选选项的文本

来自分类Dev

在文本区域中显示所选文本

来自分类Dev

限制文本区域

来自分类Dev

禁用的文本区域

来自分类Dev

响应文本区域

来自分类Dev

Javascript-显示文本区域的剩余字符

来自分类常见问题

从保存的文本区域反应显示换行符

来自分类Dev

文本区域行应以XML结构显示

来自分类Dev

django tinymce没有显示丰富的文本区域

来自分类Dev

在文本区域而不是HTML代码中显示html输出

来自分类Dev

让所选的单选按钮显示在文本区域中

来自分类Dev

在输入文本区域内突出显示单词

来自分类Dev

如何拖动图像并在文本区域中显示图像

来自分类Dev

在两个标签之间以全角显示文本区域

来自分类Dev

如何使用jQuery循环显示/隐藏文本区域?

来自分类Dev

如何动态显示浮动文本区域的上方或下方?

来自分类Dev

文本区域行应以XML结构显示

来自分类Dev

让所选的单选按钮显示在文本区域中

来自分类Dev

localStorage:刷新时显示“未定义”的文本区域