跨度输入要跨越的文本 [英] Span to input text to span

问题描述

可能重复：

什么是jQuery的最佳现场编辑插件？

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

For example, when you click on a span, it becomes an input-text, and when you click outside the span it becomes an span again, and you could edit the input text. So you basicly change the tag name when you click on it.

但你怎么能这样做？显示和隐藏跨度和输入文本看起来不是最好的解决方案..

But how can you do that? Showing and hiding spans and input-text's does not look like the best solution..

推荐答案

在这里，看看，它已经简化了，但应该可以帮到你： http://jsfiddle.net/RUwtt/

Here, take a look at that, it's simplified, but should help you : http://jsfiddle.net/RUwtt/

Html：

<span>My value here!</span>

Javascript：

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

这篇关于跨度输入要跨越的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！