HTML/CSS/JS：如何用行号制作文本区域的错觉？答案

【问题标题】：HTML/CSS/JS: How to make an illusion of a textarea with line numbers?HTML/CSS/JS：如何用行号制作文本区域的错觉？
【发布时间】：2009-12-15 13:51:12
【问题描述】：

我想要一个在左侧显示行号的文本区域。 Wrap 应设置为“off”（以便水平滚动可用）。我想将我的页面作为一个独立的 .html 文件（不会有图形），所以我想避免使用任何 3rd 方框架。

我应该走哪条路？你会怎么做呢？

【问题讨论】：

标签： javascript html textarea line-numbers

【解决方案1】：

我将从两个文本区域和同步机制开始。像这样的，

    <script>
    window.sync = function(e){
            var textarea = document.getElementById("lines");
            var source   = document.getElementById("some_text_area");
            textarea.scrollTop = source.scrollTop;
        }

        window.populate = function populate(){
            if(populate.started){
                return;
            }

            populate.started = true;
            var textarea = document.getElementById("lines");
            var str = '';
            for(var i=0;i < 100;i++){
                str = str + (i +'\r\n');
            }
            textarea.value = str;
        }
    </script>

<div>
<textarea 
    style="width:40px;overflow:hidden;height:40px;" 
    readonly="true" 
    id="lines"
></textarea>
<textarea 
    style="width:500px;height:40px;" 
    id="some_text_area" 
    onclick="populate()"
    onscroll="sync();"
></textarea>
</div>

当然populate()函数（以及样式声明和事件声明）应该更加健壮和智能，但是，它只是为了展示目的。

【讨论】：

是的，但我认为，在某些情况下，当 line-height 不同时，它不会被整齐地排列出来。
这就是为什么你可以使用1em作为行高。

【解决方案2】：

我认为您最好的选择是只拥有一个常规文本区域，并在他们键入时显示预览（如堆栈溢出）。在该预览中，您可以轻松地在每一行上添加行号并通过 CSS 设置外观格式。

【讨论】：

抱歉，不，我希望用户在输入时拥有它们。 textarea 将包含特殊信息，每行一项，行号将用于标识该项。

【解决方案3】：

另一个简单的方法是创建一个窄而高的背景图像，并在 textarea 上添加一些左侧填充。这有一个小警告，即具有固定数量的行数和字体样式，但它是所需代码量最少的选项。

【讨论】：

【解决方案4】：

没有图片，这很难。

最佳选择：将 第二个设置相同（字体大小、行高、填充...）但样式不同（无背景颜色、无边框）的文本区域放在原始文本区域的左侧.将其设为只读，将其从选项卡轮换中取出（tabindex=99999 可能会起到作用或只是禁用它），然后将行号放入其中。据我所知，这应该可以正常工作，甚至可以在客户端在浏览器中手动调整字体大小之类的情况下存活下来。

您甚至可以在原始文本区域中使用position: relative 和一个大的padding-left: 值来将计数器文本区域移动到原始文本区域中。

缺点：行计数器不会跟随文本区域的垂直滚动。请参阅下面的 cmets。

【讨论】：

不只是禁用它会使其脱离标签轮换吗？
我看到这样一种解决方案存在一个问题 - 如果用户开始用鼠标选择行号，他可以（至少在某些浏览器如 Opera 中）滚动行容器而不滚动主容器。
这可能可以通过制作容器unselectable 来解决，但您指出了一个更大的缺陷：左侧文本区域不会跟随垂直滚动。因此，必须将 textareas 都设置得如此之高以至于它们不会滚动，并使用周围的 div 和 overflow: auto 来处理滚动。
@Vilx: re DIV: 使用 textarea 更安全，因为您可以捕获所有在其他地方进行的与 textarea 相关的 CSS 设置（例如 textarea { line-height: 1.9em }）
我发现stackoverflow.com/questions/34952298/… 有助于同步滚动

【解决方案5】：

您必须包装文本区域并捕获寻找换行符的击键（例如 ENTER）。快速谷歌搜索，你会得到http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506

【讨论】：

【解决方案6】：

就我个人而言，我只需要一个常规的 textarea 和一个左侧下方的 div 来显示数字（可能会随着更多的回车而自动调整）。

【讨论】：