通過使用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; 
     }); 
    }); 
});