跨度輸入文本跨越

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