HTML の <textarea> に行番号を付与する jQuery プラグイン jQuery LinedTextArea を使ってみました。
<textarea> フィールドを（コーディング目的などの）テキストエディタとして使いたい場合など、行番号を付与して使いたいケースがあります。CSS と JavaScript でがんばって作る方法もありますが、jQuery のプラグインを使うことで比較的簡単に実現できそうだったので紹介します。
目的のプラグインは jQuery LinedTextArea です。ざっと探した限りで CDN が存在していなさそうだったので、リンク先から git clone するかダウンロードしておきます（最低限必要になるのは jquery-linedtextarea.css と jquery-linedtextarea.js の２つです）。
準備段階として、これらを jQuery 本体の後にロードしておきます：
そして目的の <textarea> を指定して、以下のようなコードを実行します：
目的の <textarea> に "lined" というクラスを指定した上で、jQuery で $('.lined') に対して linedtextarea() を実行します。上記例では { selectedLine: 1 } というパラメータを付けて実行しています。これにより１行目が選択された状態で表示されます：
こんな感じ。
<textarea> フィールドを（コーディング目的などの）テキストエディタとして使いたい場合など、行番号を付与して使いたいケースがあります。CSS と JavaScript でがんばって作る方法もありますが、jQuery のプラグインを使うことで比較的簡単に実現できそうだったので紹介します。
目的のプラグインは jQuery LinedTextArea です。ざっと探した限りで CDN が存在していなさそうだったので、リンク先から git clone するかダウンロードしておきます（最低限必要になるのは jquery-linedtextarea.css と jquery-linedtextarea.js の２つです）。
準備段階として、これらを jQuery 本体の後にロードしておきます：
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script> <script src="./jquery-linedtextarea.js"></script> <link href="./jquery-linedtextarea.css" rel="stylesheet"/> :
そして目的の <textarea> を指定して、以下のようなコードを実行します：
<textarea class="lined">
あいうえお
かきくけこ
さしすせそ
</textarea>
<script>
$(function(){
$('.lined').linedtextarea({
selectedLine: 1
});
});
</script>
目的の <textarea> に "lined" というクラスを指定した上で、jQuery で $('.lined') に対して linedtextarea() を実行します。上記例では { selectedLine: 1 } というパラメータを付けて実行しています。これにより１行目が選択された状態で表示されます：
こんな感じ。
