javascript - HTML/CSS/JS : How to make an illusion of a textarea with line numbers?

Question

我想要一个在左侧显示行号的文本区域。换行应设置为“关闭”(以便水平滚动可用)。我想让我的页面成为一个独立的 .html 文件(不会有图形)，所以我想避免任何第 3 方框架。

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

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