如何使用jquery添加帶有值的div的文本框（編輯就位）

嗨，我正在嘗試使用jquery將編輯功能添加到我的網站中。我不想使用插件，所以我的想法是，當你點擊包含內容的div時，它會用文本框替換div，然後模糊它會提交一篇文章來保存內容。如何使用jquery添加帶有值的div的文本框（編輯就位）

到目前爲止，我有點擊事件，但我不知道如何用文本框替換div，然後將它提交模糊，我可以大概找出ajax請求。

任何幫助將是偉大的，謝謝。到目前爲止，這是我...只是單擊事件：

$('.control-panel-profile-update').click(function() { 
     alert('Handler for .click() called.'); 
    });

來源

2011-02-12 Bill

這不是完全書寫，它可能不完全工作，但它是值得一試。祝你好運：

$('.control-panel-profile-update').live('click', function() { 
    $(this).replaceWith('<input type="text" id="inlineEdit" value="' + $(this).html() + '" />'); 

    $('#inlineEdit').focus().live('blur keyup', function(event) { 
    if (event.keyCode && event.keyCode != 13) return false; 

    $(this).replaceWith('<div class="control-panel-profile-update">' + $(this).val() + '</div>'); 
    }); 
});

這裏有一個小提琴：http://jsfiddle.net/Af6X6/2/。我也增加了對enter密鑰的支持。

來源

2011-02-12 02:51:21 Blender

攪拌機......似乎是工作，有沒有辦法把那在div價值，並把它放到系統產生的文本框的值？ – Bill 2011-02-12 03:17:38

此外，似乎不清除模糊上的文本框，我不介意，如果它只提交時，他們按下輸入，當文本框被點擊了它woudld回到它的方式 – Bill 2011-02-12 03:19:21

解決的辦法之一是增加一個隱藏的div與它一個文本框。

<div style="display:none; id="textbox_container"> 
<textarea id="box"></textarea> 
</div>

然後在你點擊功能，顯示您的文本框

$("#textbox_container").show();

您可以.val("")

希望這有助於更新文本框的值。

來源

2011-02-12 02:46:04 Rafal

有兩種方法可以做到這一點，在現代瀏覽器中，您可以使用contenteditable = true，然後在blur上發送新內容。這照顧到必須換出一個textarea。

<div contenteditable="true">Some Text</div>

或者你可以用js的方式做到這一點。

http://jsfiddle.net/2RyT2/23/

$(function(){ 
    $("#meText").live('click',function(){ 
     var originalDiv = this; 
      $(this).replaceWith($("<textarea></textarea>").text($(this).text()).width($(this).width()).height($(this).height()).blur(function(){$(this).replaceWith($(originalDiv).text($(this).val()));})); 
    }); 
});

來源

2011-02-12 02:54:54 Loktar

如何使用jquery添加帶有值的div的文本框（編輯就位）

回答

相關問題