CODEWITHSUNDEEP
javascriptjqueryhtmlinputtextarea
Neophile
Neophile

Reputation: 5880

Change an HTML input to textarea and copy over all the events

I am trying to dynamically change a HTML input to a textarea field and convert it back to a text field. I can do that properly using the code given below but I am unable to copy over the events that happen on the text field. Is there a way I could copy over the events from the text field over to the textarea? If there is a better way to do this, kindly let me know.

JsFiddle

HTML:

<input id="textbox" type="text" name="fieldValue_0_3" onchange="alert('Hello WOrld');" value="this is a birthdate" tabindex="73">
<a href="#" id="change">Change</a>
<a href="#" id="changetext">Change To TextField</a>

Cheers.

Upvotes: 0

Views: 948

Answers (1)

Sid M
Sid M

Reputation: 4364

Do it this way

var textbox = $("#textbox"); $("#change").click(function () {
    $input = $("#textbox")
    $textarea = $("<textarea id='textarea'></textarea>").attr({
        id: $input.prop('id'),
        name: $input.prop('name'),
        value: $input.val(),
        onchange: $input.attr('onchange'),
        tabIndex: $input.prop('tabIndex')
    });
    $input.after($textarea).remove(); }); $("#changetext").click(function () {
    $textarea = $("#textbox")
    $input = $("<input></input>").attr({
        id: $textarea.prop('id'),
        name: $textarea.prop('name'),
        value: $textarea.val(),
        onchange: $textarea.attr('onchange'),
        tabIndex: $textarea.prop('tabIndex')
    });
    $textarea.after($input).remove(); });

Fiddle: Demo

Note: Its always better to take two different controls

Upvotes: 1

Related Questions