输入框行号实现方法js

内容纲要

使用counter-increment来实现输入框行号是不可行的。输入框的行号通常是通过JavaScript来实现的。

以下是一个使用JavaScript创建输入框行号的示例:

HTML:

<div class="input-container">
  <div class="line-numbers"></div>
  <textarea class="code-input" rows="5" oninput="updateLineNumbers()"></textarea>
</div>

CSS:

.input-container {
  position: relative;
}

.line-numbers {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  padding: 5px;
  font-family: monospace;
  line-height: 1.5;
  color: gray;
  border-right: 1px solid lightgray;
}

.code-input {
  padding-left: 40px;
  font-family: monospace;
  resize: none;
}

JavaScript:

function updateLineNumbers() {
  const inputContainer = document.querySelector('.input-container');
  const lineNumbersContainer = document.querySelector('.line-numbers');
  const codeInput = document.querySelector('.code-input');

  const lines = codeInput.value.split('\n');
  const lineNumbers = [];

  for (let i = 0; i < lines.length; i++) {
    lineNumbers.push(i + 1);
  }

  lineNumbersContainer.innerHTML = lineNumbers.join('<br>');
}

在上面的示例中,我们使用JavaScript编写了一个updateLineNumbers函数,该函数在输入框内容发生变化时被调用。该函数通过获取输入框的值,将其按行分割,并创建一个与行数相对应的数组。然后,我们将数组中的行号用<br>标签连接起来,并将结果赋值给行号容器的innerHTML属性。

请注意,在使用这个示例之前,确保将JavaScript代码放置在适当的位置,例如在<body>结束标签前或者通过外部JavaScript文件引入。

这样,当用户在输入框中输入内容时,行号容器将自动更新显示相应的行号。希望这次的解答对你有所帮助。

输入框行号实现方法js

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

滚动到顶部