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

Question

我有一个输入框，其尺寸在焦点上发生变化。

我的工作方式如下

JSFIDDLE

这是一行 html

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

这是 Jquery。

$("#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');
});

正如您所看到的，这个问题是它没有做它应该做的事情。虽然输入框的尺寸发生了变化，但仍然保持单行输入。我如何将其转换为多行文本区域？我看到了很好的答案jQuery change hidden input type to textarea ，但我需要 Textarea 在模糊时转换回 inout 。我该怎么做？

Answer 1

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

只需将其更改为上面的文本区域即可。请参阅更新的 fiddle here .