Jquery 如何动态地将输入更改为多行文本区域

我有一个输入框，它的尺寸随着焦点的变化而变化

我的工作原理如下

下面是一行html

<input id="box" style="width:50;"></input>

---

正如你所看到的，这个问题在于它没有做它应该做的事情。尽管输入框的尺寸发生变化，但它仍然是单行输入。如何将其转换为多行文本区域？我已经看到了很好的答案，但我需要将文本区域转换回inout on blur。我该怎么做呢？

为什么不让输入成为一个文本区域，然后以同样的方式更改尺寸

---

为什么不让输入成为一个文本区域，然后以同样的方式更改尺寸

只需将其更改为如上所示的文本区域。请查看更新的小提琴。

只需将其更改为如上所示的文本区域。请看最新的小提琴

$("#box").focus(function () {
    /*to make this flexible, I'm storing the current width & height in an attribute*/
    $(this).attr('data-defaultwidth', $(this).width());
    $(this).attr('data-defaultheight', $(this).height());
    $(this).animate({
        width: 400
    }, 'slow');
    $(this).animate({
        height: 300
    }, 'slow');
}).blur(function () {
    /* lookup the original width */
    var w = $(this).attr('data-defaultwidth');
    var h = $(this).attr('data-defaultheight');
    $(this).animate({
        width: w
    }, 'slow');
    $(this).animate({
        height: h
    }, 'slow');
});

<textarea id="box" style="width:50;"></textarea>

<textarea id="box" style="width:200px;height:20px;resize:none"></textarea>