技術
2019.5.1(Wed)

jQueryライブラリを使用して、簡単にテキストエリアに行数を表示

#JavaScript #技術
記事をシェア：

こんにちは、樋口です。
 
今回は、ライブラリを読み込むだけで簡単にテキストエリア内に行番号を付けることができる、jQueryLined TextAreaについてご紹介します。
 
今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
JQuery Lined TextArea plugin
最新
BootStrap
3.2.0

ライブラリの入手

JQuery Lined TextArea pluginは下記サイトよりダウンロードできます。
JQuery Lined TextArea pluginダウンロード
 
ZIPファイルダウンロード後、jquery-linedtextareaォルダの中にある、「jquery-linedtextarea.css」と「jquery-linedtextarea.js」の中身を自身のプロジェクトに持ってきます。
 
これで準備は完了です。

フォルダ階層

今回は、下記フォルダ階層でサンプルを作成していきます。
 

　test
　　|- index.html
　　|- js
　　　|- test.js
　　　|- jquery.js
　　　|- jquery-linedtextarea.js
　　|- css
　　　|- bootstrap.css
　　　|- jquery-linedtextarea.css

HTMLファイル

初めに、HTMLファイルを作成します。
 
– index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>JQuery Lined TextArea pluginサンプル</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/jquery-linedtextarea.css">
  </head>
  <body>  
	<div id="wrap">
	  <div class="container">
		<div class="col-lg-12">
		  <div class="form-group" style="text-align: center;">
			<h1 class="tatle-style">JQuery Lined TextArea pluginサンプル</h1>
		  </div>
		  <div class="form-group">
			<span></span>
		  </div>
		  <form class="form-signin" id="commentForm">
            <div class="col-lg-12" style="margin-top: 30px;margin-left: 28%;">
              <textarea class="lined"  rows="10" cols="60"></textarea>
            </div>
		  </form>
		</div>
	  </div>
	</div>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/jquery-linedtextarea.js"></script>
    <script type="text/javascript" src="./js/test.js"></script>
  </body>
</html>

9～10行目：
　jquery-linedtextarea.jsで使用するCSSを読み込みます。
 
24行目：
　行数を表示するテキストエリアを記載します。
　クラス名に「lined」を設定してください。（任意で構いません）
 
30～32行目：
　jquery-linedtextarea.jsで使用するjavaScriptを読み込みます。
 
以上で、HTMLは完成です。
次に、javaScriptについて説明します。

javaScriptファイル

ライブラリ実行用のjavaScriptファイルを作成します。

– test.js

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

2行目～4行目：
　テキストエリアに行数を付けるため、初期化の処理を入れます。

実行結果

最後に

今回紹介したライブラリを使用すれば、簡単にテキストエリアに行数を付けることができます。実装手順はとても簡単なので、興味がある方は試してみてください。
 
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

記事をシェア
ITエンジニアリング事業部 リーダー I.Higuchi 技術を中心に、言語の入門編や便利なライブラリ紹介など、技術のお役立ち情報をご紹介します。
MOST VIEWED ARTICLES
お知らせ
2023.4.6(Thu)

SFA／CRM・日報クラウドサービス「feels」の3周年記念 「営業活動DX診断・無料個別相談キャンペーン」を開始！

#リリース情報 #feels
お知らせ
2024.4.4(Thu)

ソフトウェアの導入を支援！ IT導入補助金2024のIT導入支援事業者に「feels」が認定

#リリース情報 #feels
ライフスタイル
2021.2.10(Wed)

WEB面接で失敗しない！ 面接官が実は見ている７つのポイント

#採用 #ビジネス
ライフスタイル
2016.2.8(Mon)

新卒採用担当はここを見ている！ 絶対にやってはいけない履歴書の書き方

#採用 #ビジネス
技術
2022.1.17(Mon)

これさえ見ればもう怖くない！ Javaでよく出るエラーと対策5選

#まとめ #Java
技術
2022.2.25(Fri)

正規表現入門　否定の正規表現の書き方《～ではない行。～を含まない行。》

#まとめ #プログラム
技術
2020.12.16(Wed)

Java初心者の登竜門！ Java Bronze試験で間違えやすい問題６選

#プログラム #Java