Question

可能重复：
What's the best edit-in-place plugin for jQuery?

例如，当您单击某个范围时，它将变为输入文本，当您在范围外单击时，它将再次成为范围，您可以编辑输入文本。因此，当您单击它时，您基本上会更改标记名称。

但你怎么能这样做？显示和隐藏跨度和输入文本似乎不是最佳解决方案..

Answer 1

在这里，看一看，它已经过简化，但应该对您有所帮助：http://jsfiddle.net/RUwtt/

Html：

<span>My value here!</span>

Javascript：

$(function () {
    $('span').live('click', function () {
        var input = $('<input />', {'type': 'text', 'name': 'aname', 'value': $(this).html()});
        $(this).parent().append(input);
        $(this).remove();
        input.focus();
    });

    $('input').live('blur', function () {
        $(this).parent().append($('<span />').html($(this).val()));
        $(this).remove();
    });
});

Answer 2

一些浏览器支持'contenteditable'属性，这使得只需单击元素并编辑内容即可。您可以捕捉焦点并模糊可编辑元素的事件以保存更改。

请参阅： http://html5demos.com/contenteditable

Answer 3

我们在生产中有这样的解决方案。表单显示有关带有span标签的联系人的信息以及编辑图像。单击时，span标记将旋转以显示要进行修改的输入文本...我们正在使用JQuery Flip插件来处理此问题。最后的效果很漂亮

跨度输入要跨越的文本

3 个答案: