跨度输入文本跨越

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

我们在生产中有这样的解决方案。表单显示与span标签的联系信息以及编辑图像。单击时，span标记会旋转以显示输入文字以进行修改......我们正在使用JQuery Flip插件来处理此问题。最后effetc是相当slicky

Answer 3

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

参见： http://html5demos.com/contenteditable