如何使用 jquery 在 div 中添加带有值的文本框(就地编辑)

发布于 2024-10-16 23:54:33 字数 358 浏览 5 评论 0原文

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

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

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

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

HI, I'm trying to add edit in place functionality to my site with jquery. I don't want to use a plugin, so my idea was that when you click the div that has the content in it, it would replace the div with a text box, then on blur it would submit a post to save the content.

So far I have the click event, but I'm not sure how to replace the div with a text box, and then make it submit on blur, I can probably figure out the ajax request though.

Any help would be great, thanks. So far this is what I have... just the click event:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

攒眉千度 2024-10-23 23:54:33

虽然它还没有完全写好,也可能无法完全发挥作用,但值得一试。祝你好运:

$('.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 键的支持。

It's not completely written, and it might not completely work, but it's worth a shot. Good luck:

$('.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>');
  });
});

Here's a Fiddle: http://jsfiddle.net/Af6X6/2/. I added support for the enter key too.

攒眉千度 2024-10-23 23:54:33

有两种方法可以做到这一点,在现代浏览器中,您可以使用 contenteditable=true,然后在模糊时发送新内容。这解决了必须交换文本区域的问题。

<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()));}));
    });
});

There are two ways to do this, in modern browsers you can use contenteditable=true, and then on blur send the new contents on their way. This takes care of having to swap out a textarea.

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

or you can do it the js way.

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()));}));
    });
});
煞人兵器 2024-10-23 23:54:33

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

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

然后在您的点击函数中,显示文本框

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

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

希望这有帮助。

One of the solutions is to add a hidden div with a textbox in it.

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

Then in your click function, you show the textbox

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

You can update the value of the textbox with .val("")

Hope this helps.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文