Konwersja Span do wejścia

Question

Zajmuję aplikację internetową, mam taki wymóg, że gdy użytkownik kliknij na text wewnątrz span muszę convert go do input field i on blur muszę convert it back ponownie rozpiętości. Więc używam następującego skryptu na jednej z moich stron jsp.

Java Script:

<script type="text/javascript"> 
function covertSpan(id){ 

    $('#'+id).click(function() { 
     var input = $("<input>", { val: $(this).text(), 
            type: "text" }); 
     $(this).replaceWith(input); 
     input.select(); 
    }); 

     $('input').live('blur', function() { 
      var span=$("<span>", {text:$(this).val()}); 
      $(this).replaceWith(span); 

     });   
} 

kod JSP:

<span id="loadNumId" onmouseover="javascript:covertSpan(this.id);">5566</span> 

Teraz mój problem jest, wszystko działa poprawnie tylko po raz pierwszy. Chodzi mi o to, że gdy kliknę na tekst w środku zakresu dla first time, konwertuje on na pole wejściowe i ponownie onblur przechodzi z pola wejściowego do zwykłego tekstu. Ale jeśli spróbujesz jeszcze raz, to nie zadziała. Co jest nie tak z powyższym scenariuszem?

Answer 1

Wanderers - aby zaoszczędzić trochę czasu, ostatnia opcja na dole tej odpowiedzi będzie najprawdopodobniej Twoje preferowane rozwiązanie.

---

Wierzę, że to jest to, czego szukasz: http://jsfiddle.net/2D9FW/

var switchToInput = function() { 
    var $input = $("<input>", { 
     val: $(this).text(), 
     type: "text" 
    }); 
    $input.addClass("loadNum"); 
    $(this).replaceWith($input); 
    $input.on("blur", switchToSpan); 
    $input.select(); 
}; 
var switchToSpan = function() { 
    var $span = $("<span>", { 
     text: $(this).val() 
    }); 
    $span.addClass("loadNum"); 
    $(this).replaceWith($span); 
    $span.on("click", switchToInput); 
}; 
$(".loadNum").on("click", switchToInput); 

użyłem klasy zamiast identyfikatora więc można zrobić wiele, ale można przełączyć go z powrotem, jeśli chcesz. Jeśli chcesz użyć ID: http://jsfiddle.net/2D9FW/1/

---

Ktoś niedawno podniósł to więc moja uwaga wróciła do niego.Jest to kolejny sposób, żeby to zrobić (zmiana DOM trochę): http://jsfiddle.net/2khuobze/

<div class="inputSwitch"> 
First Name: <span>John</span><input /> 
</div> 
<div class="inputSwitch"> 
Last Name: <span>Doe</span><input /> 
</div> 

JS

$(".inputSwitch span").on("click", function() { 
    var $this = $(this); 
    $this.hide().siblings("input").val($this.text()).show(); 
}); 
$(".inputSwitch input").on("blur", function() { 
    var $this = $(this); 
    $this.hide().siblings("span").text($this.val()).show(); 
}).hide(); 

---

Ponadto, jeśli chce wspierać wybierając wszystko na ostrość i tabbing dostać się do następny/poprzedni rozpiętość/wejście, można to zrobić (Lubię tę opcję najlepszą): http://jsfiddle.net/x33gz6z9/

var $inputSwitches = $(".inputSwitch"), 
    $inputs = $inputSwitches.find("input"), 
    $spans = $inputSwitches.find("span"); 
$spans.on("click", function() { 
    var $this = $(this); 
    $this.hide().siblings("input").show().focus().select(); 
}).each(function() { 
    var $this = $(this); 
    $this.text($this.siblings("input").val()); 
}); 
$inputs.on("blur", function() { 
    var $this = $(this); 
    $this.hide().siblings("span").text($this.val()).show(); 
}).on('keydown', function(e) { 
    if (e.which == 9) { 
    e.preventDefault(); 
    if (e.shiftKey) { 
     $(this).blur().parent().prevAll($inputSwitches).first().find($spans).click(); 
    } else { 
     $(this).blur().parent().nextAll($inputSwitches).first().find($spans).click(); 
    } 
    } 
}).hide(); 

Answer 2

Najpierw należy również zmienić obsługę obsługi kliknięć, aby można było użyć również live(). Powinieneś jednak zauważyć, że od pewnego czasu live() jest przestarzałe. Powinieneś używać zamiast tego on().

Po drugie, po zastąpieniu wejścia span, nie nadaje się elementowi id. Dlatego element nie pasuje już do selektora dla obsługi kliknięcia.

Osobiście osobiście zastosowałbym inne (i prostsze) podejście. Musiałbym mieć zarówno zakres, jak i dane wejściowe w moim znaczniku obok siebie. Jeden byłby ukryty, podczas gdy drugi jest pokazany. Daje to mniejszą szansę popełnienia błędów przy próbie odtworzenia elementów DOM i poprawy wydajności, ponieważ nie będziesz stale dodawać/usuwać elementów z DOM.

Answer 3

Rozumiem, że uważasz, że wymiana elementu to fajna rzecz, jednak skorzystałbym z podpowiedzi, aby uzyskać tekst. Czemu? To jest dużo łatwiejsze i właściwie nieco ładniejsze również dla użytkownika. Jeśli jesteś ciekawy, jak to zrobić, pokażę ci.

html:

<span class='editable'>foobar</span> 

JS:

$(function() 
{ 
    $('span.editable').click(function() 
    { 
    var span = $(this); 
    var text = span.text(); 

    var new_text = prompt("Change value", text); 

    if (new_text != null) 
     span.text(new_text); 
    }); 
}); 

http://jsfiddle.net/qJxhV/1/

Answer 4

Generyczna wersja smerny's excellent answer z id może być utworzona przez nieznaczną zmianę dwóch linii: $input.attr("ID", "loadNum"); staje się $input.attr("ID", $(this).attr("ID")); - w ten sposób po prostu przyjmuje bieżący identyfikator i zachowuje go, czymkolwiek on jest.

Podobnie $span.attr("ID", "loadNum"); staje $span.attr("ID", $(this).attr("ID"));

To po prostu pozwala funkcje mają być stosowane do każdego div. Po dodaniu dwóch podobnych linii zarówno identyfikator, jak i klasa działają poprawnie. Zobacz example.

Answer 5

Dokonałem niewielkiej zmiany w kodzie, Używając tego typu wejścia nie może być pusty, wróci do swojej rzeczywistej wartości.

var switchToInput = function() { 
     var $input = $("<input>", { 
      val: $(this).text(), 
      type: "text", 
      rel : jQuery(this).text(), 
     }); 
     $input.addClass("loadNum"); 
     $(this).replaceWith($input); 
     $input.on("blur", switchToSpan); 
     $input.select(); 
    }; 
    var switchToSpan = function() { 
      if(jQuery(this).val()){ 
         var $text = jQuery(this).val(); 
       } else { 
         var $text = jQuery(this).attr('rel'); 
       } 
     var $span = $("<span>", { 
      text: $text, 
     }); 
     $span.addClass("loadNum"); 
     $(this).replaceWith($span); 
     $span.on("click", switchToInput); 
    } 
    $(".loadNum").on("click", switchToInput); 

jsFiddle: - https://jsfiddle.net/svsp3wqL/