How to dynaimcally change an Input into Multiline Textarea

Question

I have a Input box whose dimensions i change on focus.

I have it working like below

Here is the One line html

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

Here is the 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');
});

The Problem with this as you can see is that it doesnt do what it is supposed to do. Although the dimensions of the input box change, it still remains a single line input. How can i convert this into a multiline Textarea? I havee seen great answer jQuery change hidden input type to textarea, but i need the Textarea to convert back into inout on blur. How do i do that?

score 3 · Answer 1 · answered Oct 15 '14 at 11:15

3

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

Just change it into text area like above. Please see the updated fiddle here.

answered Oct 15 '14 at 11:15

Aneesh Mohan

1,077
8
17

score 2 · Accepted Answer · answered Oct 15 '14 at 11:10

2

Why not just let the input be a textarea from the get go and just change the dimensions in the same manner? http://jsfiddle.net/w5206dtr/

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

answered Oct 15 '14 at 11:10

jwaern

643
5
16

How to dynaimcally change an Input into Multiline Textarea

2 Answers2