web-dev-qa-db-ja.com

テキストエリアに行番号を追加するHTML

以下のコードのようなテキストエリアがあり、その左側に行番号を表示する方法があります。

Jqueryプラグインはありますか？

<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>
htmltextarea
41
Hulk

Lined TextArea があります ミラー Alan WilliamsonによるjQueryのプラグイン
MITライセンス
jQuery 1.3+

26
anatoly techtonik

コードミラー は、Webページにコードエディターを埋め込むためのJavaScriptライブラリです。

コード行には、次のような優れた機能があります

  • オートコンプリート
  • テーマ
  • 混合言語モード
  • 探す
  • マージ/差分インターフェース
  • カスタムスクロールバーなど.
8
ChandrasekarG

これは非常に簡単ですが、効果的なトリックです。行番号がすでに追加された画像を挿入します。

唯一の問題は、UIデザインに合わせて独自の画像を作成する必要がある場合があることです。

https://jsfiddle.net/vaakash/5TF5h/

textarea {
    background: url(http://i.imgur.com/2cOaJ.png);
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

クレジット： Aakash Chakravarthy

5
Bern

CodePress はWordPressで使用されるものです。

2
Mathias Bynens

HTML5 Canvasオブジェクトを使用して、行番号をペイントすることでこれを実行しようとした人はいませんでした。ここで、私が数時間でプールできたことを説明します。キャンバスとテキストエリアを並べて配置し、キャンバスに数字を塗ります。

https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH

enter image description here

trueは、textareaコンテンツ全体を繰り返し、各行の高さを測定するためにオブジェクトをミラーリングすることなく、Paint（）関数で簡単にワードラップを処理できないという制限があります。また、非常に複雑なコードが生成されます。

プレビュー画像

1
SoLaR