【Stretchy】入力フォームの大きさを簡単に変更する方法

HTML・JavaScript..

2021.01.11

こんにちは、ハル@haru_elpisです。

入力フォームの大きさを変更したい時に使える「Stretchy」プラグインの紹介です。

Stretchyとは

記入項目に文字を打つと、項目のサイズが大きくなったり、小さくなったりするプラグインのことです。このプラグインは、ユーザーの注目を引きたい場合に使います。

ダウンロードした「stretchy.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

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

<body>

    <input placeholder="プレースホルダ" style="width: 100px;">
    <input value="通常" style="width: 80px;">

</body>

今回紹介したライブラリを使用すれば、簡単に伸び縮みする入力フォームの作成ができます。ただ文字数が多いと、CSSの装飾ではコントロールできないこともありますので、その点だけ注意してください。

おわりっ