jQueryライブラリのStretchyを使用して、入力ボックスが伸び縮みするフォームを作成

#プログラム #JavaScript

記事をシェア：

コピー

こんにちは、樋口です。

今回は、ライブラリを読み込むだけで簡単に入力した文字数に合わせてボックスが伸び縮みするフォームを作成できる「Stretchy」についてご紹介します。

今回は下記ライブラリを使用していきます。

jQuery: １.１０.２
BootStrap: ３.２.０
Stretchy: –

ライブラリの入手

stretchy.jsは下記サイトよりダウンロードできます。
Stretchyダウンロード

上記リンクのホームページより、「Download」メニューからJSファイルをダウンロードします。ダウンロード後、「stretchy.js」を自身のプロジェクトに持ってきます。

これで準備は完了です。

フォルダ階層

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

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>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>

２３行目：
プレースホルダ入りの通常入力項目の表示となります。

２６行目：
通常入力項目の表示となります。(初期入力値はそのまま）

２９行目：
入力後に項目の長さが変更されます。

３２～３９行目：
プルダウン項目の表示となります。

４２行目：
矢印の上下により、数値の変更を行えます。

４５行目：
テキストエリアの表示となります。

４８行目：
プレースホルダ入りのテキストエリアの表示となります。

５４～５５行目：
stretchyを使用するために必要な、JSファイルを読み込みます。

以上で、HTMLは完成です。