Utwórz element span "edytowalny"

Question

Mam element span, który chcę edytować za pomocą dwukrotnego kliknięcia. (Oznacza to, że użytkownik może edytować tekst i zostanie zapisany, gdy kliknie na zewnątrz).

Efekt, który chcę emulować, jest podobny do tego, kiedy dwukrotnie klikam właściwości CSS w Narzędziach programistycznych Google Chrome. (Patrz zdjęcie.)

Answer 1

Teraz przetestowane i działa (przynajmniej Firefox 8 i Chromium 14 na Ubuntu 11.04):

$('span').bind('dblclick', 
    function(){ 
     $(this).attr('contentEditable',true); 
    }); 

JS Fiddle demo.

---

Zmieniano w odpowiedzi na komentarz Randomblue za (poniżej):

... W jaki sposób wykryć, gdy użytkownik kliknie poza rozpiętości, tak, że mogę ustawić attr ('contentEditable' false)

Wystarczy dołączyć metodę blur():

$('span').bind('dblclick', function() { 
     $(this).attr('contentEditable', true); 
    }).blur(
     function() { 
      $(this).attr('contentEditable', false); 
     }); 

JS Fiddle demo.

Answer 2

Powyższe prace: Przetestowałem go w tym jsfiddle: http://jsfiddle.net/nXXkw/

Ponadto, aby usunąć możliwość edycji, gdy użytkownik kliknie poza elementu, to:

$('span').bind('blur',function(){ 
    $(this).attr('contentEditable',false); 
}); 

Answer 3

Jeśli chcesz rozwiązanie który działa w WSZYSTKICH nowoczesnych przeglądarkach, oto fajną jQuery plugin zrobiłem że emuluje funkcjonalność opisana:

Wystarczy kropla tego bloku do kodu-Base:

//plugin to make any element text editable 
//http://stackoverflow.com/a/13866517/2343 
$.fn.extend({ 
    editable: function() { 
     var that = this, 
      $edittextbox = $('<input type="text"></input>').css('min-width', that.width()), 
      submitChanges = function() { 
       that.html($edittextbox.val()); 
       that.show(); 
       that.trigger('editsubmit', [that.html()]); 
       $(document).unbind('click', submitChanges); 
       $edittextbox.detach(); 
      }, 
      tempVal; 
     $edittextbox.click(function(event) { 
      event.stopPropagation(); 
     }); 

     that.dblclick(function(e) { 
      tempVal = that.html(); 
      $edittextbox.val(tempVal).insertBefore(that).bind('keypress', function(e) { 
       if ($(this).val() !== '') { 
        var code = (e.keyCode ? e.keyCode : e.which); 
        if (code == 13) { 
         submitChanges(); 
        } 
       } 
      }); 
      that.hide(); 
      $(document).click(submitChanges); 
     }); 
     return that; 
    } 
}); 

Teraz można dokonać edycji dowolnego elementu po prostu dzwoniąc .editable() na obiekcie selektor jQuery, tak:

$('#YOURELEMENT').editable(); 

aby zmiany, gdy użytkownik podnosi je, wiążą się z "editsubmit" zdarzenie, tak jak poniżej:

$('#YOURELEMENT').editable().bind('editsubmit', function(event, val) {})​; 
//The val param is the content that's being submitted. 

Oto demo skrzypce: http://jsfiddle.net/adamb/Hbww2/

Answer 4

Znalazłem tę fajną wtyczkę jQuery: "Edycja X edytowalna w miejscu za pomocą Twitter Bootstrap, jQuery UI lub czysta jQuery" http://vitalets.github.com/x-editable/

Answer 5

Znalazłem wiele odpowiedzi, aby być nieaktualnymi na ten temat, ale rozwiązanie Adamb było najłatwiejszym rozwiązaniem dla mnie, dziękuję.

Jednak jego rozwiązanie zostało wielokrotnie zgłoszone do uruchomienia z powodu nie usunięcia zdarzenia keypress wraz z elementem.

Oto zaktualizowana wtyczka używająca $.on() zamiast $.bind() oraz z usunięciem procedury obsługi zdarzenia keypress przy ponownym utworzeniu elementu.

$.fn.extend({ 
    editable: function() { 
     var that = this, 
      $edittextbox = $('<input type="text"></input>').css('min-width', that.width()), 
      submitChanges = function() { 
       that.html($edittextbox.val()); 
       that.show(); 
       that.trigger('editsubmit', [that.html()]); 
       $(document).off('click', submitChanges); 
       $edittextbox.detach(); 
      }, 
      tempVal; 
     $edittextbox.click(function(event) { 
      event.stopPropagation(); 
     }); 

     that.dblclick(function(e) { 
      tempVal = that.html(); 
      $edittextbox.val(tempVal).insertBefore(that).off("keypress").on('keypress', function(e) { 
       if ($(this).val() !== '') { 
        var code = (e.keyCode ? e.keyCode : e.which); 
        if (code == 13) { 
         submitChanges(); 
        } 
       } 
      }); 
      that.hide(); 
      $(document).one("click", submitChanges); 
     }); 
     return that; 
    } 
}); 

http://jsfiddle.net/Hbww2/142/