【jQuery】画面サイズに合わせて、テキストエリアの大きさを変える

jQueryを使って、画面サイズの変更に合わせて

テキストエリアの大きさも自動で変化させるやり方を紹介します。

ソースコード
1. jQueryのコード
2. 実際の実装例
細かな解説

ソースコード

今回のやり方は、テキストエリアにidをつけます。

そのidに対して、画面サイズが変更された時のイベントで、テキストエリアの大きさを変更させます。

<textarea id = "textarea" cols="40" rows="5"></textarea>

id に textarea をつけています。

jQuery で、このidを使って、大きさを変化させていきます。

jQueryのコード

次のコードを、大きさを変化させたいtextarea よりも下の位置にscriptタグを作って、記述します。

//初期画面幅余白 = 画面幅 - 初期テキストエリア幅
const marginWidth = window.innerWidth - $('#textarea').innerWidth();
//初期画面高さ余白 = 画面高さ - 初期テキストエリア高さ
const marginHeight = window.innerHeight - $('#textarea').innerHeight();

$(window).bind("resize ready", function(event){
    $('#textarea').height( $(window).height() - marginHeight);
    $('#textarea').width( $(window).width() - marginWidth);
});

これで、冒頭のgif画像のように、textareaの大きさを変化させることができます。

今回のコードは、HTMLが読み込まれた時点での、画面サイズを基準に、marginWidthとmarginHeightの定数を作ります。

そして、画面の大きさが変わるとイベントが呼ばれ、

画面サイズからmarginWidth と marginHeight を引いた数値をテキストエリアの大きさとして設定しています。

画面が表示された時の、textareaの高さと幅、画面の高さと幅を取得して、余白を求めたいので、textareaのタグより先にjQueryのコードを記述すると、textareaの高さと幅が取得できず、大きさを変えられません

画面を表示した時の余白の幅を、ウインドウの幅とtextareaの幅の差から計算して、定数に格納しておきます。

その後は、画面のサイズが変更される度に、

新しいtextarea の幅 = 新しいウインドウの幅 – 余白の幅(定数の値)

を計算して、textareaの幅を求めて、設定しています。

うおな

高さに関しても同じやり方で求めています。幅の部分を高さに置き換えてください。

実際の実装例

うおな

冒頭のgifで表示していたソースコードの例がこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        textarea{
            resize: none;
            height: 200px;
            width: 500px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <div>
        <textarea id = "textarea" cols="40" rows="5"></textarea>
    </div>
    <script>
        //初期画面幅余白 = 画面幅 - 初期テキストエリア幅
        const marginWidth = window.innerWidth - $('#textarea').innerWidth();
        //初期画面高さ余白 = 画面高さ - 初期テキストエリア高さ
        const marginHeight = window.innerHeight - $('#textarea').innerHeight();

        $(window).bind("resize ready", function(event){
            $('#textarea').height( $(window).height() - marginHeight);
            $('#textarea').width( $(window).width() - marginWidth);
        });
    </script>
</body>
</html>

bodyタグの中で、

まずjQueryの読み込みを行ないます。

その次にtextareaのタグを書いています。

最後に、textareaの大きさを変えるためのscriptタグを書いています。

うおな

今回のやり方では、この順番でコードが記述されていないと、

textareaの大きさを変えることができません。

細かな解説

ここからは、今回のコードについて、少し細かく解説をしていきます。

$(window).width()

この短い1文で、ウインドウの幅を取得することができます。

ウインドウの高さを取得したい時は、widthの部分をheightにするだけです。

$(window).height()

width()やheight()に引数が渡されない場合、$()で指定している要素の現在の値を取得します

つまり、「 $(window).height() 」の場合は、

$()で指定されている「window」の現在の高さを取得するということになります。

width()やheight()に引数が渡された場合、$()で指定している要素に引数の値を設定します

つまり、「 $(window).height(100)」の場合は、

$()で指定している「window」の高さを、100に設定するということになります。

$('#textarea').height( $(window).height() - marginHeight);

今回のコードにあるこの部分は、

id がtextarea の要素、つまりtextareaタグの高さを、

ウインドウの高さから、余白の高さ(画面表示時に求めた定数)を引いた値に設定する

ということをやっています。

うおな

幅に対しても、同じやり方です。

今回はjQueryが使える前提で、コードを書きました。

jQueryを使わずに、java Script だけで実装することもできるのでしょうか？

また、考えてみたいと思います。