お知らせ
2023.12.5(Tue)
目次
こんにちは、樋口です。
今回は、ライブラリを読み込むだけで簡単に入力した文字数に合わせてボックスが伸び縮みするフォームを作成できる「Stretchy」についてご紹介します。
今回は下記ライブラリを使用していきます。
stretchy.jsは下記サイトよりダウンロードできます。
Stretchyダウンロード
上記リンクのホームページより、「Download」メニューからJSファイルをダウンロードします。ダウンロード後、「stretchy.js」を自身のプロジェクトに持ってきます。
これで準備は完了です。
今回は、下記フォルダ階層でサンプルを作成していきます。
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>Stretchyサンプル</title> <link rel="stylesheet" href="./css/bootstrap.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">Stretchyサンプル</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%;"> <input placeholder="通常(プレースホルダ)" style="width: 120px;"> </div> <div class="col-lg-12" style="margin-top: 30px;margin-left: 28%;"> <input value="通常(初期表示)" style="width: 81px;"> </div> <div class="col-lg-12" style="margin-top: 30px;margin-left: 28%;"> <input style="width: 1px;"> </div> <div class="col-lg-12" style="margin-top: 30px;margin-left: 28%;"> <input list="datalist" value="Ja" style="width: 40px;"> <datalist id="datalist"> <option>Java</option> <option>JavaScript</option> <option>X++</option> <option>C++</option> <option>Python</option> </datalist> </div> <div class="col-lg-12" style="margin-top: 30px;margin-left: 28%;"> <input type="number" value="100" style="width: 38px;"> </div> <div class="col-lg-12" style="margin-top: 30px;margin-left: 28%;"> <textarea value="テキストエリア(初期表示)" style="height: 25px; margin: 0px; width: 200px;"></textarea> </div> <div class="col-lg-12" style="margin-top: 30px;margin-left: 28%;"> <textarea placeholder="テキストエリア(プレースホルダ)" style="height: 24px; width: 300px;"></textarea> </div> </form> </div> </div> </div> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/stretchy.js"></script> </body> </html>
今回紹介したライブラリを使用すれば、簡単に伸び縮みする入力フォームの作成ができます。本ライブラリに興味がある方は、ぜひ試してみてください。
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。
それではまた。
《関連記事》