5

左側に行番号を表示するテキストエリアが必要です。ラップは「オフ」に設定する必要があります (水平スクロールを使用できるようにするため)。ページを 1 つの自己完結型の .html ファイル (グラフィックはありません) にしたいので、サードパーティのフレームワークは避けたいと思います。

どちらに行けばいいですか？これをどのように行いますか？

4

6 に答える 6

3

まず、2つのテキスト領域と同期メカニズムから始めます。このようなもの、

    <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

もう1つの簡単な方法は、幅は狭いが背の高い背景画像を作成し、テキストエリアにいくつかの左パディングを作成することです。これには、行数とフォントスタイルが固定されているという小さな注意点がありますが、必要なコードの量が最も少ないオプションです。

于 2009-12-15T14:08:14.430 に答える
2

あなたの最善の策は、通常のテキストエリアを用意し、入力時にプレビュー（スタックオーバーフローなど）を表示することだと思います。そのプレビュー内で、各行に行番号を簡単に追加し、CSS を介して外観をフォーマットできます。

于 2009-12-15T13:57:37.683 に答える
1

画像がないと厳しいです。

最善の策:元のテキストエリアの左側に、同じ設定(フォントサイズ、行の高さ、パディングなど) で異なるスタイル (背景色なし、境界線なし) の 2 つ目のテキストエリアを配置します。読み取り専用にし、タブのローテーションから外し (tabindex=99999トリックを実行するか、単に無効にする場合があります)、行番号を入れます。私が考える限り、これはうまく機能し、正しく機能するはずです。クライアントがブラウザでフォントを手動でサイズ変更するなどの事態にも耐えられるはずです。

position: relative元のテキストエリアに大きなpadding-left:値を使用して、カウンターテキストエリアを元のテキストエリアに移動することもできます。

欠点: 行カウンターは、テキストエリアの垂直スクロールに追従しません。以下のコメントを参照してください。

于 2009-12-15T14:09:09.143 に答える
0

個人的には、通常のテキストエリアと左側に数字を表示するdivがあります（キャリッジリターンが追加されると自動調整される可能性があります）。

于 2009-12-15T14:03:16.500 に答える
0

テキスト領域をラップし、改行文字 (ENTER など) を探すキーストロークをキャプチャする必要があります。簡単な Google 検索を行うと、http://www.dhtmlgoodies.com/forum/viewtopic.php? t=506 が表示されます。

于 2009-12-15T14:01:17.817 に答える