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

Posted 2023-05-07

【中文标题】jQuery将输入更改为具有完整属性和属性值的textarea

【英文标题】：jQuery to change input to text area with attribute and atrribute values intact

【发布时间】：2016-05-30 04:34:24

【问题描述】：

我有以下几点：

<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"]。我实际上是按照这个 *** 问题来实现我的用例：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>

在此先感谢您！

【问题讨论】：

您可以做的是，在用 textarea 替换输入之前，将输入字段值存储在 var 中并将其设置为 textarea 值 - ***.com/questions/415602/…。此外，您可以根据需要向 textarea 添加属性

cols="70", rows="4", class="input_marceditor" 和 tabindex="1" 是静态的，而 id 和 name 是动态的，取决于在那里输入的内容。我会尝试查看您发送的链接。谢谢！

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

【讨论】：

哇，好快，看来你的回答 Rejith 奏效了。我会再试一次并接受你的回答。非常感谢！

对我的用例 Rejith 来说就像一个魅力！ :)

【参考方案2】：

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

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

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

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

【讨论】：

感谢 Macainian！ Rejith 的回答似乎解决了我的问题。哦，好吧，需要阅读更多关于 jquery/javascript 的内容！

显然我也是，哈哈。直到 Rejith 的帖子，我才意识到你可以使用 prop() 以及显然所有东西来获得价值。现在我质疑 attr() 的意义是什么。

见glorious thread。 prop() 是 jQuery 1.6 的版本。