jQuery 将输入更改为具有完整属性和属性值的文本区域

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，但是文本框中已经存在的数据被删除并检查了 Google Chrome 中的元素，我只得到以下信息：

<textarea></textarea>

jquery 有没有办法做我想做的事情，如下所示，这样我在我的特定用例中得到以下内容？输入 id 和输入名称是动态的，因此我使用了 input[name^="tag_245_subfield_b"]。我实际上是按照这个 stackoverflow 问题来实现我的用例：如何使用 jquery 将输入元素更改为 textarea。

<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：即使这有效，也有可能所有属性都与目标标签类型不兼容。您需要相应地进行一些条件和调整。