javascript - jQuery to change input to text area with attribute and atrribute values intact - Stack Overflow

admin管理员组

文章数量:1026989

I have the following:

<input type="text" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" value="" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999">

And I wanted to change the text input type into textarea by using the following jquery:

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

With the jquery above, I get to have a textarea but the data that is already in the text box is/are removed and inspecting the elements in Google Chrome, I only get the following:

<textarea></textarea>

Is there a way in jquery to do what I wanted to do as what can be seen below, such that I get the following below in my particular use case? The input id and input name is dynamic, hence I used input[name^="tag_245_subfield_b"]. I actually followed this stackoverflow question to achieve my use case: how to change an input element to textarea using jquery.

<textarea cols="70" rows="4" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" class="input_marceditor" tabindex="1">;/textarea>

Thanks in advance and cheers!

I have the following:

<input type="text" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" value="http://www.test./2073-4441/8/1/23/pdf" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999">

And I wanted to change the text input type into textarea by using the following jquery:

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

With the jquery above, I get to have a textarea but the data that is already in the text box is/are removed and inspecting the elements in Google Chrome, I only get the following:

<textarea></textarea>

Is there a way in jquery to do what I wanted to do as what can be seen below, such that I get the following below in my particular use case? The input id and input name is dynamic, hence I used input[name^="tag_245_subfield_b"]. I actually followed this stackoverflow question to achieve my use case: how to change an input element to textarea using jquery.

<textarea cols="70" rows="4" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" class="input_marceditor" tabindex="1">http://www.mdpi./2073-4441/8/1/23/pdf</textarea>

Thanks in advance and cheers!

• javascript
• jquery
• html
• input

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Feb 18, 2016 at 6:16 schnydszchschnydszch 43555 silver badges2323 bronze badges 2

• What you can do is, before replacing input with textarea, store input field value in a var and set that to textarea value - stackoverflow./questions/415602/…. Also, you can add attributes to textarea if you want – khushboo29 Commented Feb 18, 2016 at 6:23
• cols="70", rows="4", class="input_marceditor" and tabindex="1" is static while the id and name is dynamic and dependent on what is inputted there. I will try to look over the link you sent. Thanks! – schnydszch Commented Feb 18, 2016 at 6:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Set the value using val(this.value). If you want to copy the other attributes as well, then use the following.

console.log($('input[name^="tag_245_subfield_"]'))
$('input[name^="tag_245_subfield_"]').each(function() {
  var textbox = $(document.createElement('textarea')).val(this.value);
  console.log(this.attributes);
  $.each(this.attributes, function() {
    if (this.specified) {
      textbox.prop(this.name, this.value)
    }
  });
  $(this).replaceWith(textbox);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="tag_245_subfield_u_270150_676903" name="tag_245_subfield_u_270150_676903" value="http://www.test./2073-4441/8/1/23/pdf" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999" style="color:red;">

PS : Even though this works there is a chance that all the attributes are not patible with destination tag type. You'll need to make some conditions and adjustments accordingly.

At no point in time did you transfer everything from the first to the second except style, but you aren't using style. You are only using "cols", "row" "id", "name", "class", "tabindex", "size", and "maxlength". I do not know of a way to do them all at once, but you can certainly copy them one by one in the same way you are doing the "style". For the value, use .val() to get and set:

textbox.val($(this).val());

Had to make a correction. I didn't notice what you were calling textbox.

Just wanted to tack on one more thing. Everything within <> is an attribute and can be obtained using attr(), but that doesn't make them part of the style attribute even if they are for styling. Also note that some attributes are special and can be obtained through prop(), data(), and css(). Class has one too, but I forget what it is at the moment.

I have the following:

<input type="text" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" value="" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999">

And I wanted to change the text input type into textarea by using the following jquery:

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

With the jquery above, I get to have a textarea but the data that is already in the text box is/are removed and inspecting the elements in Google Chrome, I only get the following:

<textarea></textarea>

Is there a way in jquery to do what I wanted to do as what can be seen below, such that I get the following below in my particular use case? The input id and input name is dynamic, hence I used input[name^="tag_245_subfield_b"]. I actually followed this stackoverflow question to achieve my use case: how to change an input element to textarea using jquery.

<textarea cols="70" rows="4" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" class="input_marceditor" tabindex="1">;/textarea>

Thanks in advance and cheers!

I have the following:

<input type="text" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" value="http://www.test./2073-4441/8/1/23/pdf" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999">

And I wanted to change the text input type into textarea by using the following jquery:

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

With the jquery above, I get to have a textarea but the data that is already in the text box is/are removed and inspecting the elements in Google Chrome, I only get the following:

<textarea></textarea>

Is there a way in jquery to do what I wanted to do as what can be seen below, such that I get the following below in my particular use case? The input id and input name is dynamic, hence I used input[name^="tag_245_subfield_b"]. I actually followed this stackoverflow question to achieve my use case: how to change an input element to textarea using jquery.

<textarea cols="70" rows="4" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" class="input_marceditor" tabindex="1">http://www.mdpi./2073-4441/8/1/23/pdf</textarea>

Thanks in advance and cheers!

• javascript
• jquery
• html
• input

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Feb 18, 2016 at 6:16 schnydszchschnydszch 43555 silver badges2323 bronze badges 2

• What you can do is, before replacing input with textarea, store input field value in a var and set that to textarea value - stackoverflow./questions/415602/…. Also, you can add attributes to textarea if you want – khushboo29 Commented Feb 18, 2016 at 6:23
• cols="70", rows="4", class="input_marceditor" and tabindex="1" is static while the id and name is dynamic and dependent on what is inputted there. I will try to look over the link you sent. Thanks! – schnydszch Commented Feb 18, 2016 at 6:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Set the value using val(this.value). If you want to copy the other attributes as well, then use the following.

console.log($('input[name^="tag_245_subfield_"]'))
$('input[name^="tag_245_subfield_"]').each(function() {
  var textbox = $(document.createElement('textarea')).val(this.value);
  console.log(this.attributes);
  $.each(this.attributes, function() {
    if (this.specified) {
      textbox.prop(this.name, this.value)
    }
  });
  $(this).replaceWith(textbox);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="tag_245_subfield_u_270150_676903" name="tag_245_subfield_u_270150_676903" value="http://www.test./2073-4441/8/1/23/pdf" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999" style="color:red;">

PS : Even though this works there is a chance that all the attributes are not patible with destination tag type. You'll need to make some conditions and adjustments accordingly.

At no point in time did you transfer everything from the first to the second except style, but you aren't using style. You are only using "cols", "row" "id", "name", "class", "tabindex", "size", and "maxlength". I do not know of a way to do them all at once, but you can certainly copy them one by one in the same way you are doing the "style". For the value, use .val() to get and set:

textbox.val($(this).val());

Had to make a correction. I didn't notice what you were calling textbox.

Just wanted to tack on one more thing. Everything within <> is an attribute and can be obtained using attr(), but that doesn't make them part of the style attribute even if they are for styling. Also note that some attributes are special and can be obtained through prop(), data(), and css(). Class has one too, but I forget what it is at the moment.

本文标签： javascriptjQuery to change input to text area with attribute and atrribute values intactStack Overflow