1

嗨，我正在尝试使用 jquery 向我的网站添加就地编辑功能。我不想使用插件，所以我的想法是，当您单击其中包含内容的 div 时，它会将 div 替换为文本框，然后在模糊时它会提交一个帖子以保存内容。

到目前为止，我有点击事件，但我不知道如何用文本框替换 div，然后让它提交模糊，我可能可以弄清楚 ajax 请求。

任何帮助都会很棒，谢谢。到目前为止，这就是我所拥有的......只是点击事件：

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

3 回答 3

3

它没有完全写出来，它可能无法完全工作，但值得一试。祝你好运：

$('.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-12T02:51:21.760 回答
3

有两种方法可以做到这一点，在现代浏览器中，您可以使用 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-12T02:54:54.017 回答
0

一种解决方案是添加一个隐藏的 div，其中包含一个文本框。

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

然后在您的点击功能中，您显示文本框

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

您可以使用更新文本框的值.val("")

希望这可以帮助。

于 2011-02-12T02:46:04.793 回答