how to change an input element to textarea using jquery

Question

I have the following html:

<div>
    <input type="text" style="xxxx" size="40"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="40"/>
</div>

Now I want to change each input whose size is '100' to a textarea which has the same style as the input.

I have tried this:

$("input[size=100]").each(function(){
  //how to replace it?
});

Any ideas?

I used this solution found in the answers here:

$("input[size=100]").each(function() {
    var style = $(this).attr('style'), textbox = $(document.createElement('textarea')).attr({
        id : $(this).id,
        name : $(this).name,
        value : $(this).val(),
        style : $(this).attr("style"),
        "class" : $(this).attr("class"),
        rows : 6
    }).width($(this).width());
    $(this).replaceWith(textbox);
});

I tried, it does not work. BTW, I do not think my post deserved a down-vote. — hguser, Jun 13 '13 at 09:10
Google does not work? It does for me. The first hit I get is e.g. [jQuery change hidden input type to textarea](http://stackoverflow.com/q/9112409) - if you have specific problems with *that*, you should add them to the question — Pekka, Jun 13 '13 at 09:10
https://www.google.com.hk/#newwindow=1&safe=strict&q=jquery+input+to+textarea&oq=jquery+input+to+textarea&gs_l=serp.3..0i30j0i8i30l8.83718.87111.7.87599.16.12.2.0.0.1.465.1837.0j1j2j2j1.6.0...0.0...1c.1.17.serp._-a9uI8YFMs&bav=on.2,or.r_cp.&bvm=bv.47883778,d.dGI&fp=a68c7ad54c7fa6a3&biw=1920&bih=986 . This is what I got. — hguser, Jun 13 '13 at 09:11
Also, I find this `$('code').contents().unwrap().wrap('
');` But it does not work for input element. — hguser, Jun 13 '13 at 09:13
I linked to a question above whose accepted answer should work. — Pekka, Jun 13 '13 at 09:14
`.contents().unwrap()` does not work because `input` elements don't have any children. [I know where you have the solution from](http://stackoverflow.com/q/7093417/218196), and the question is a bit different. — Felix Kling, Jun 13 '13 at 09:14
@FelixKling: :) That's right. That is why I ask this question. — hguser, Jun 13 '13 at 09:21
@hguser, the solution you found would work, but it's a bit convoluted. Why not simply use the tools jQuery has given you, as shown in two of the answers below? — Derek Henderson, Jun 13 '13 at 09:29
I do not think this is a lazy question. I googled, I just do not find the link you post. So does this mean I am lazy? I have used the `jquery replace tag` `jquery input to textarea` as keywords to google, so I think there are two many arbitrary people like Pekka. — hguser, Jun 13 '13 at 09:36
@hguser, you're welcome to use whichever answer you feel best. Let me point out, though, that Richard A's answer is the only one that *does not* copy the styles, which you said was necessary. — Derek Henderson, Jun 13 '13 at 09:41
@hguser, also, as you can see from this jsperf test I created (http://jsperf.com/best-way-to-replace-preserving-style), the method of appending an element and then removing the old one is a lot slower than using jQuery's `replaceWith()` method. — Derek Henderson, Jun 13 '13 at 09:46
@Pekka Now, this is the first google result, funny how that works. — FreeSoftwareServers, Feb 22 '22 at 22:48

Derek Henderson · Accepted Answer · 2013-06-13T09:28:27.253

12

jQuery has a .replaceWith() method you can use to replace one element with another. So, copy your styles from the input and use this method, as follows:

$('input[size="100"]').each(function () {
    var style = $(this).attr('style'),
        textbox = $(document.createElement('textarea')).attr('style', style);
    $(this).replaceWith(textbox);
});

Demo

edited Jun 13 '13 at 09:28

answered Jun 13 '13 at 09:14

Derek Henderson

9,388
4
42
71

score 3 · Answer 2 · answered Jun 13 '13 at 09:18

Try something along the lines of

$('input[size="100"]').each(function()
{
    var textarea = $(document.createElement('textarea'));
    textarea.text($(this).val());

    $(this).after(textarea).remove();
});

Here's an example: http://jsfiddle.net/SSwhK/

score 1 · Answer 3 · answered Jun 13 '13 at 09:10

1

Try like this

$("input").each(function(){
      if($(this).attr('size') == "100") {
             my_style = $(this).attr('style');
             $(this).replaceWith("<textarea style='"+my_style+"'></textarea>");
      }
});

answered Jun 13 '13 at 09:10

GautamD31

28,552
10
64
85

You misunderstand me, I just do not know how to replace it. – hguser Jun 13 '13 at 09:11
See my edit....my ans also not worth of downvote as like your question – GautamD31 Jun 13 '13 at 09:13
I agree this didn't deserve a downvote... but why answer such a lazy question in the first place, enabling the user to ask more and more of them? Just sayin'. – Pekka Jun 13 '13 at 09:15
Yes @Pekka웃 ,but I thought that it is simple that makes him clarify – GautamD31 Jun 13 '13 at 09:17

score 0 · Answer 4 · answered Jun 13 '13 at 09:14

0

$(document).ready(function(){
    $("input[size=100]").each(function(){
      //how to replace it?
        $(this).after('<textarea style="xxxx"></textarea>').remove();
    });
});

Check http://jsfiddle.net/6JH6B/

answered Jun 13 '13 at 09:14

som

4,650
2
21
36

how to change an input element to textarea using jquery

4 Answers4

Linked