Question

我有以下html：

<div>
    <input type="text" style="xxxx" size="40"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="40"/>
</div>

现在我想将大小为'100'的每个输入更改为与输入具有相同样式的textarea。

我试过这个：

$("input[size=100]").each(function(){
  //how to replace it?
});

有什么想法吗？

我在答案here中使用了此解决方案：

$("input[size=100]").each(function() {
    var style = $(this).attr('style'), textbox = $(document.createElement('textarea')).attr({
        id : $(this).id,
        name : $(this).name,
        value : $(this).val(),
        style : $(this).attr("style"),
        "class" : $(this).attr("class"),
        rows : 6
    }).width($(this).width());
    $(this).replaceWith(textbox);
});

Answer 1

jQuery有一个.replaceWith()方法，可以用来将一个元素替换为另一个元素。因此，从输入中复制样式并使用此方法，如下所示：

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

Demo

Answer 2

尝试一下

的内容

$('input[size="100"]').each(function()
{
    var textarea = $(document.createElement('textarea'));
    textarea.text($(this).val());

    $(this).after(textarea).remove();
});

这是一个例子： http://jsfiddle.net/SSwhK/

Answer 3

试试这个

$("input").each(function(){
      if($(this).attr('size') == "100") {
             my_style = $(this).attr('style');
             $(this).replaceWith("<textarea style='"+my_style+"'></textarea>");
      }
});

Answer 4

$(document).ready(function(){
    $("input[size=100]").each(function(){
      //how to replace it?
        $(this).after('<textarea style="xxxx"></textarea>').remove();
    });
});

检查http://jsfiddle.net/6JH6B/

如何使用jquery将输入元素更改为textarea

4 个答案: