轉換textarea中的輸入字段

Question

我有一個表格。 在此表單中，我有一個input字段。 我想在文本區域中更改一些input字段。 我從外部來源收到此表格，因此無法更改html。 如何在js / jquery中做到這一點？

這是一個例子：

<label for="MMERGE12" class="MMERGE12-label"><span class="MMERGE12-label">categorie trattate</span>
                                                                        <input id="yikes-easy-mc-form-1-MMERGE12" name="MMERGE12" placeholder="" class="yikes-easy-mc-text" type="text" value="">

                                    <!-- description -->
                                    <p class="form-field-description"><small></small></p>                                   
                                                                        </label>

用此代碼解決：

var input    = document.getElementById('yikes-easy-mc-form-1-MMERGE12'),
    textarea = document.createElement('textarea');
textarea.id    = input.id;
textarea.cols  = 40;
textarea.rows  = 5;
textarea.value = input.value;
textarea.name = input.name;
input.parentNode.replaceChild(textarea, input);

Answer 1

    //Create a new textarea
    var textarea = jQuery("<textarea></textarea>");

    //Select the input 
    var input = jQuery("#yikes-easy-mc-form-1-MMERGE12");

    //Asign the value, id, name from the input to the textarea
    textarea.val(input.val());
    textarea.attr('id', input.attr('id'));
    textarea.attr('name', input.attr('name'));
    //You can copy any other attribute you like here

    //Finally do the replacement
    input.reaplceWith(textarea);

如果您在加載時執行此操作，或者如果您使用ajax加載，則可能需要將其包裝在准備好的jQuery(document).ready(function() { /* code here */ }) ，只需在數據包含后執行此代碼即可已附加到DOM

Answer 2

嘗試這個

$(document).ready(function () {
        var input = $("#yikes-easy-mc-form-1-MMERGE12");
        var textArea = $("<textarea></textarea>").attr({
            id: input.attr("id"),
            name: input.attr("name"),                    
            value: input.val()
        });
        // class is set separately because "class" is a reserved word ...
        textArea.attr("class", input.attr("class"));
        //insert textarea right after original input, and remove input
        input.after(textArea).remove();
});