5

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

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

4

6 回答 6

3

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

    <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()函数（以及样式声明和事件声明）应该更健壮和智能，但是，它只是为了展示目的。

于 2009-12-15T14:24:24.447 回答
2

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

于 2009-12-15T13:57:37.683 回答
2

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

于 2009-12-15T14:08:14.430 回答
1

没有图像，这是一个艰难的过程。

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

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

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

于 2009-12-15T14:09:09.143 回答
0

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

于 2009-12-15T14:01:17.817 回答
0

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

于 2009-12-15T14:03:16.500 回答