Question

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

我的工作方式如下

这是One line 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');
});

你可以看到的问题在于它没有做它应该做的事情。虽然输入框的尺寸发生了变化，但它仍然是单线输入。如何将其转换为多行Textarea？我已经看到了很棒的答案jQuery change hidden input type to textarea，但我需要Textarea在模糊时转换回来。我该怎么做？

Answer 1

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

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

Answer 2

为什么不让输入成为一个文本区域，只是以相同的方式改变尺寸？ http://jsfiddle.net/w5206dtr/

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

如何动态地将输入更改为Multiline Textarea

2 个答案: