I have a text input that I'd like to replace with a textarea, preserving all of the attributes. How can I do this with jQuery?

Sample input:

<input type="text" name="newfeature" id="newfeature"
  class="form-required" tabindex="3"
  aria-required="true" />

Desired output:

<textarea type="text" name="newfeature" id="newfeature"
  class="form-required" tabindex="3"
  aria-required="true"></textarea>

I know this can be done manually using the .prop() selector and specifying each attribute/property, but how can I do it dynamically?

Also, this is not necessary, but would it possible to preserve the bindings when doing this?

I have a text input that I'd like to replace with a textarea, preserving all of the attributes. How can I do this with jQuery?

Sample input:

<input type="text" name="newfeature" id="newfeature"
  class="form-required" tabindex="3"
  aria-required="true" />

Desired output:

<textarea type="text" name="newfeature" id="newfeature"
  class="form-required" tabindex="3"
  aria-required="true"></textarea>

I know this can be done manually using the .prop() selector and specifying each attribute/property, but how can I do it dynamically?

Also, this is not necessary, but would it possible to preserve the bindings when doing this?

• javascript
• jquery
• dom
• attributes
• properties

Share Improve this question Follow asked Mar 3, 2012 at 20:55 cwdcwd 54.9k5555 gold badges171171 silver badges199199 bronze badges 2

• 1 <textarea> elements don't have a type attribute... – Šime Vidas Commented Mar 3, 2012 at 21:08
• @ŠimeVidas the .prop() takes care of that. It also sets the value property straight. – David Hellsing Commented Mar 3, 2012 at 21:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

This also works with the value attribute correctly:

$('input').each(function() {

    var attrs = {};        

    $.each(this.attributes, function() {
       attrs[this.name] = this.value;
    });

    $(this).replaceWith($('<textarea>').prop(attrs));
});​

Example: http://jsfiddle/FyYDT/

ADDED

If you want jQuery events to pass along (not remended), you need to re-bind them. Something like:

$('input').click(function() {

    alert('hey');

}).each(function() {

    var attrs = {},
        ta = $('<textarea>');

    $.each(this.attributes, function() {
       attrs[this.name] = this.value;
    });

    $.each($(this).data('events'), function(i, f) {
        $.each(f, function(){
            ta.bind(i, this.handler);
        });
    });

    $(this).replaceWith(ta.prop(attrs));

});​

http://jsfiddle/FyYDT/1/

I would simply loop through the inputs attributes:

function makeInputTextarea(inputElem) {
    var $textarea = $("<textarea></textarea>");
    $.each(inputElem.attributes, function(i, attrib){
        var name = attrib.name;
        var value = attrib.value;
        if(name === "type") return; // textareas don't have a "type" attribute
        $textarea.attr(name, value);
    });
    return $textarea;
}

$(function() {
    $('input[type="text"]').parent().each(function({
        $(this).html($(this).html().replace(/(<\/)input/gi, "$1textarea").replace(/(<textarea[^>]*)value\=['"](.*)['"]([^>]*)\/>/, "$1>$2</textarea>"));
    }));
});

Should do the trick?

You could do a

$('input, textarea').live('click', function() {
    // do actions!
});

To preserve bindings