HOME > コラム > WEB全般 > inputやtextareaなどの記入エリアのサイズが変わる「Stretchy.js」の使い方

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

コラム

Stretchy.jsは、お問い合わせフォームや検索フォームでテキストを記入する記入エリアをオシャレにするjQueryプラグインです。
Stretchy.jsを読み込ませるだけで、あとは何もせずにHTMLを記入するだけです。
とても簡単なので、すぐに導入できます。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

Stretchy.jsとは

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

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

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

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

本家サイト

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

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_strc_180222.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

ポイント
利用するjsファイル
<script type="text/javascript" src="/js/stretchy.js"></script>

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

最後に動作確認

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

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

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

その他、補足

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

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

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

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

あと、宴会芸というところでしょうか(笑)

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

執筆 : 清水 隼斗

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

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。