AMG Solution

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

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

jQuery
1.10.2
BootStrap
3.2.0
Stretchy

ライブラリの入手

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

フォルダ階層

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

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

HTMLファイル

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

23行目:
プレースホルダ入りの通常入力項目の表示となります。
 
26行目:
通常入力項目の表示となります。(初期入力値はそのまま)
 
29行目:
入力後に項目の長さが変更されます。
 
32~39行目:
プルダウン項目の表示となります。
 
42行目:
矢印の上下により、数値の変更を行えます。
 
45行目:
テキストエリアの表示となります。
 
48行目:
プレースホルダ入りのテキストエリアの表示となります。
 
54~55行目:
stretchyを使用するために必要な、JSファイルを読み込みます。
 
以上で、HTMLは完成です。

実行結果

最後に

今回紹介したライブラリを使用すれば、簡単に伸び縮みする入力フォームの作成ができます。本ライブラリに興味がある方は、ぜひ試してみてください。
 
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING