通过使用jQuery将标签更改为文本框？

Question

如何使用jQuery将标签更改为文本框？例如，我有2个按钮，一个是编辑，另一个是视图。当用户点击编辑按钮时，所有标签控件都会变成文本框。另一方面，当使用单击查看按钮时，所有文本框都将变为标签。我知道我可以使用“可见”属性来显示某些控件。但是我的页面有太多的控制权。它花了我很多时间来编写代码。任何人都可以帮助我？

Answer 1

您可以使用jQuery的replaceWith函数。

$("label").replaceWith(function() { 
    return "<input type=\"text\" value=\"" + $(this).html() + "\" />"; 
}); 

演示：http://jsfiddle.net/eqne2/1/

Answer 2

我想你想要的是能够当用户点击它来改变一个按钮上的文本。

如果是这样的话，那么试试这个： http://jsfiddle.net/kasdega/MGCVW/

$(document).ready(function() { 
    $(".textButton").click(function() { 
     var me = $(this); 

     me.hide(); 
     me.after("<input id='tmpInput'/>"); 
     $("#tmpInput").focus(); 
     $("#tmpInput").bind("keyup", function(e) { 
      e.preventDefault(); 
      if (e.keyCode == '13') { 
       var value = $(this).val(); 
       $(this).remove(); 
       if(me.is("input")) { 
        me.val(value); 
       } else if(me.is("button")) { 
        me.text(value); 
       } 
       me.show(); 
      } 
      return false; 
     }); 
    }); 
});