具有交替行和行号的文本区域

Posted 2023-05-07

【中文标题】具有交替行和行号的文本区域

【英文标题】：Textarea with alternate rows and line numbers

【发布时间】：2019-02-21 11:28:41

【问题描述】：

我正在尝试使用交替行和行号绘制textarea。 获得行号的一个非常简单的解决方案如下 - 请参阅 here 了解更多详细信息。

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;

<textarea rows="10" cols="40"></textarea>

虽然有一个 textarea 与备用行只是一个简单的 as

textarea 
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 4rem;
  border: 1px solid #CCC;
  width: 100%;
  height: 400px;
  line-height: 2rem;
  margin: 0 auto;
  padding: 4px 8px;

<textarea rows="10" cols="40"></textarea>

两种解决方案都可以，但将它们结合起来就很棘手，因为两者都使用background 来破解行号和备用行背景。

【问题讨论】：

你能把两个文本区域并排放置，滚动条在外面，包含 div 吗？

【参考方案1】：

您可以通过将 textarea 包装在 div 中来组合它们，然后将剥离的背景样式分配给该包装 div，这样 2 个背景就像分层一样。

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;


.textarea-wrapper 
  display: inline-block;
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 32px;
  background-position: left 10px;

<div class="textarea-wrapper">
  <textarea rows="10" cols="40"></textarea>
</div>

我设置为 display: inline-block 的包装 div 像一个内联元素一样包装了 textarea，我将背景渐变放置在距离顶部 10px 的位置，以便为您提供 padding-top。

您可能需要调整渐变的背景大小以使其正确匹配textarea 的行高。

更新 对于@DavidThomas 的观点，为了帮助将您的文本与交替渐变对齐，背景大小的高度值应该是文本区域的行高的 2 倍（请参阅更新的 sn-p）。但更难的是让它与图像编号对齐。

【讨论】：

如果您输入字符，然后按回车键换行，您会看到数字与行高不一致。您需要考虑 <div> 和 <textarea> 具有不同的 font、font-size 和 line-height。

@DavidThomas 查看更新。主要问题是将所有内容与具有数字的图像对齐。但他的问题是关于合并图像背景......没有准确排列。

【参考方案2】：

您可以为同一个元素使用多个背景。

CSS 允许您通过background-image 属性为一个元素添加多个背景图像。

在你的情况下：

textarea 
  width: 100%;
  min-height: 100px;
  background: url(http://i.imgur.com/2cOaJ.png) top -12px left / auto no-repeat, 
              linear-gradient(#F1F1F1 50%, #F9F9F9 50%) top left / 100% 32px;
  border: 1px solid #CCC;
  box-sizing: border-box;
  padding: 0 0 0 30px;
  resize: vertical;
  line-height: 16px;
  font-size: 13px;


body 
  margin: 0;

<textarea rows="10" cols="40"></textarea>

【讨论】：

这种方法的问题是，在输入字符后，按回车换行，然后继续输入用户只能在备用行号上输入文本，这是一个有点奇怪的用户经验（i.stack.imgur.com/oeFYQ.png）；也：填充。 :)

你是对的。我只是在这里提供了一个合并两个图像的解决方案。