2

Twitterのツイート入力欄のように、マウスカーソルをtextAreaにフォーカスしたときに
textAreaの高さを変更したいです。

画像の説明をここに入力

jQueryを使って以下のようにしてみましたが、変化ありませんでした。

・javascript

$(function() {
  $('#inputTextArea')
    .focusin(function(e) {
      $(this).css('height', '250px');
    })
    .focusout(function(e) {
      $(this).css('height', '80px');
    });
});

・html

<textarea id="inputTextArea"></textarea>

どうしたらよいですか?

1
  • 1
    「変化ありません」 : テキストエリアをクリックします。
    – BLUEPIXY
    Commented 2017年9月7日 2:17

1 件の回答 1

2

同じソースコードで試してみましたけど動作しました。
ブラウザはGoogleChrome/Firefox/Safari/Operaのいずれも最新バージョンで確認しました。
focusin自体はjQuery1.4時代からあるものなので、jQueryのバージョンが古いとは考えにくいですが、念のためバージョンをおしえていただいてもいいですか?

あと、コンソールにエラーなど出ていないでしょうか?

focusinを使用している理由はありますか?focusinは子孫要素にも反応してしまうので、他の要素の子要素になっていた場合動作しない可能性があるので、その影響もあるかもしれません。focusで試してみてはどうでしょうか?

$(function() {
    $('#inputTextArea')
        .on("focus", function() {
            $(this).css('height', '250px');
        })
        .on("blur", function() {
            $(this).css('height', '80px');
        });
});
1
  • jQuryを読み込む位置を間違えるポカミスだったようです…。すみません、ありがとうございます。
    – pekochun
    Commented 2017年9月7日 5:36

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。