jQuery将输入更改为具有完整属性和属性值的textarea

Question

我有以下几点：

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

我想通过使用以下 jquery 将文本输入类型更改为 textarea：

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

使用上面的 jquery，我得到了一个 textarea，但已经在文本框中的数据被删除并检查了谷歌浏览器中的元素，我只得到以下内容：

<textarea></textarea>

在 jquery 中有没有一种方法可以做我想做的事情，如下所示，这样我就可以在我的特定用例中得到以下内容？输入 id 和输入名称是动态的，因此我使用了 input[name^="tag_245_subfield_b"]。我实际上是按照这个 stackoverflow 问题来实现我的用例：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.com/2073-4441/8/1/23/pdf</textarea>

在此先感谢您！

Answer 1

使用val(this.value) 设置值。如果您还想复制其他属性，请使用以下内容。

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.com/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.com/2073-4441/8/1/23/pdf" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999" style="color:red;">

PS ：即使这样可行，所有属性也有可能与目标标签类型不兼容。您需要相应地进行一些条件和调整。

Answer 2

除了样式之外，您从未将所有内容从第一个转移到第二个，但您没有使用样式。您只使用“cols”、“row”、“id”、“name”、“class”、“tabindex”、“size”和“maxlength”。我不知道有什么方法可以一次完成，但你当然可以像做“风格”一样一个一个地复制它们。对于值，使用 .val() 获取和设置：

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

不得不改正。我没注意到你在叫什么文本框。

只是想再做一件事。 中的所有内容都是一个属性，可以使用 attr() 获得，但这并不会使它们成为样式属性的一部分，即使它们用于样式设置。还要注意，有些属性比较特殊，可以通过prop()、data()、css()获取。班里也有，不过现在忘记是什么了。