在预定义列位置的 HTML textarea 中绘制垂直线

Question

想在 HTML textarea 中的预定义列位置绘制一条垂直线。比如80字符位置的竖线，目的是引导用户输入信息，不要输入太长的行。

因此，例如，我希望 textarea 大致如下所示：

下面是一个可以使用的代码片段，尽管其中的内容不多。

<textarea id="input" rows="10" cols="100"></textarea>

更新：这是一个基于已接受答案的完全实施的解决方案。

这只是我用来为源代码创建注释块的一个简单工具。由于在我使用的某些系统中换行，我需要指出一行的长度不会产生不需要的换行符。但还是要允许排长队，因为有时候没法避免。

jsfiddle.net/6brjxo1L

Answer 1

您可以使用线性渐变为其提供背景图片，例如

textarea {

      background-image: linear-gradient(to right, transparent 0 80%, black 80% 81%, transparent 81% 100%);
    }

当然可以根据需要设置尺寸，粗线或细线。

Answer 2

用JS把textarea缩小到80，求出宽度，换行。然后将文本区域增加回 100

const textareaEl = document.querySelector('.editor__textarea')
textareaEl.setAttribute('cols', 80)
const separatorLeft = textareaEl.offsetWidth

const separatorEl = document.querySelector('.editor__separator')
separatorEl.style.left = separatorLeft + 'px'
textareaEl.setAttribute('cols', 100)

.editor {
  width: fit-content;
  padding: 0;
  position: relative;
}

.editor__textarea {
  font-size: 10px;
  padding: 0;
  margin: 0;
}

.editor__separator {
  width: 1px;
  top: 0;
  bottom: 4px;
  background-color: #000;
  position: absolute;
  box-shadow: 2px 0px 5px;
}

<div class="editor">
  <textarea class="editor__textarea" id="input" rows="10" cols="100"></textarea>
  <div class="editor__separator"></div>
</div>

Answer 3

您可以尝试使用包装器 div:

.wrapper {
  position: absolute;
  display:inline;
}

.wrapper:before {
  content: '';
  position: absolute;
  top: 1%;
  right: 20%;
  z-index: 1;
  border: 1px solid grey;
  height: 97%;
}

<div class="wrapper">
    <textarea id="input" rows="10" cols="100"></textarea>
</div>

Answer 4

尝试使用 textarea 属性进行试验。

让我们看看我的例子。这里我设置 cols="50" 来缩小文本区域的宽度。 maxlength="300" 将字符限制为 300 个。然后使用 placeholder= "Max 300 characters" 告知用户，嘿，伙计们，字符数限制为 300 个，因此请明智地选择您的用词。然后 autocorrect="on" 检测错误的拼写并为用户提供建议的正确拼写的单词。

您可以通过我提供的 link 试验大量其他属性。

<textarea cols="50" rows="5" maxlength="200" autocorrect="on" placeholder= "Max 300 characters" wrap="hard"></textarea>

在预定义列位置的 HTML textarea 中绘制垂直线

Draw vertical line in HTML textarea at predefined column position

html

javascript

css

textarea