37770


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

[![画像の説明をここに入力](https://i.stack.imgur.com/fLS5T.jpg)](https://i.stack.imgur.com/fLS5T.jpg)

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

・javascript

[code]

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

・html

[code]

    <textarea id="inputTextArea"></textarea>
    
[/code]

どうしたらよいですか？


CC BY-SA 3.0
2017-09-07T02:08:13.230
37767
2017-09-07T04:54:46.347
22541
question
javascript html jquery html5
textAreaフォーカス時に高さを変更するには


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

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

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

[code]

    $(function() {
        $('#inputTextArea')
            .on("focus", function() {
                $(this).css('height', '250px');
            })
            .on("blur", function() {
                $(this).css('height', '80px');
            });
    });
    
[/code]


CC BY-SA 3.0
2017-09-07T04:43:19.733
37770
2017-09-07T04:54:46.347
2017-09-07T04:54:46.347
2265
2265
37767
answer