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

【问题标题】：How to dynaimcally change an Input into Multiline Textarea如何将输入动态更改为多行文本区域
【发布时间】：2014-12-10 10:25:56
【问题描述】：

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

我让它像下面那样工作

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。我该怎么做？

【问题讨论】：

标签： jquery html input focus textarea

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

为什么不从一开始就让输入成为一个文本区域并以相同的方式更改尺寸？ http://jsfiddle.net/w5206dtr/

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

【讨论】：