HOME > 制作 > Javascript > textareaに行番号を表示してくれるjQueryプラグイン「JQuery LinedTextArea」！

textareaに行番号を表示してくれるjQueryプラグイン「JQuery LinedTextArea」！

2016/07/16

こんにちは。
今回はtextareaに行番号を表示してくれるjQueryプラグイン「JQuery LinedTextArea」！です。

textareaに行数を表示できるjQueryプラグインを紹介します。

jquery-linedtextarea

http://alan.blog-city.com/jquerylinedtextarea.htmにアクセスし、下部の「Download」の箇所をクリックして、ダウンロードします。

jquery-linedtextarea.cssをhead内に読み込みます。

<link rel="stylesheet" href="css/jquery-linedtextarea.css">

1	<link rel="stylesheet" href="css/jquery-linedtextarea.css">

jQuery本体とjquery-linedtextarea.jsを/bodyの手前に読み込みます。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-linedtextarea.js"></script>

1 2	<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-linedtextarea.js"></script>

その下に下記のスクリプトを記述します。
selectedLineでハイライトできますよ。

$(function() {
	$(".lined").linedtextarea(
		{selectedLine: 5}
	);
});

$(function() {

$(".lined").linedtextarea(

{selectedLine: 5}

);

});

html部分を記述します。
先ほど指定したlinedというクラスを付けますよ。

<textarea class="lined" rows="10" cols="60"></textarea>

1	<textarea class="lined" rows="10" cols="60"></textarea>

いかがでしたか。知っておくと便利ですね。
以上でtextareaに行番号を表示してくれるjQueryプラグイン「JQuery LinedTextArea」！でした。