inputやtextareaなどの記入エリアのサイズが変わる「Stretchy.js」の使い方

inputやtextareaなどの記入エリアのサイズが変わる「Stretchy.js」の使い方

Stretchy.jsは、inputタグ、textareaタグ、select/optionタグなどの文字の入力するエリアのサイズを変えることができるjQueryプラグインです。
サイズを変えることができる・・・という表現では語弊があるかもしれません。

これらの入力エリアは元々サイズが決まっていたり、CSSでサイズを調整することができます。
それとは異なる方法で入力エリアのサイズを変えることができるということです。

サイズは、入力した文字の幅だけ大きくなっていくという仕様です。
ですので、文字を入力しなければ最小幅になっていて、一文字、二文字・・・と入力を進めるごとに入力エリアが広がっていきます。

こんなことを言うのもアレですが・・・ぶっちゃけ、実用性はほぼありません（笑）
ただ、ちょっとしたアクセントになることは間違いありませんので、先に進めていきたいと思います。

本家サイトです。
jsファイルのみのダウンロードです。

• Stretchy.js本家

phptemp_strc_180222.zip

サンプルです。
トップページの文章部分だけに適応させています。

• 組み込み済みサンプル

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

<script type="text/javascript" src="/js/stretchy.js"></script>

本家からダウンロードしたファイルをアップして読み込ませてください。
新たに読み込ませるファイルは以上です。

いきなり動作確認になりますが、間違いではありません（笑）

お問い合わせフォームなどで、stretchy.jsを読み込ませるだけです。
配布しているサンプルでは、入力エリアの装飾をしているので、追加でcssファイルを読み込ませていますが、基本的には必要ないと思います。

ただ、文字数が多いと、CSSの装飾ではコントロールできないこともありますので、その点だけ注意してください。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_171030.zip 」です。

いかがでしたでしょうか？

とてーも簡単ですので、遊びが許されるところで是非使ってみてください。
こんなことを言うのもアレですが、「なんだこれ？」ということで、入力エリアでテキストを試しに入れてみましたし、何かしらをしてもらうきっかけにはなるかもしれません。

あと、宴会芸というところでしょうか（笑）

冗談はさておき、楽しむためだけのモノですので、用途は間違えないようにしてくださいね。

執筆 : 清水 隼斗

inputやtextareaなどの記入エリアのサイズが変わる「Stretchy.js」の使い方のAMPページ