轉換跨度爲輸入

Question

我開發web應用程序，我有這樣的要求，即每當用戶點擊text內span我需要convert成input field和on blur我需要convert it back再次跨越。所以我在我的一個jsp頁面中使用了以下腳本。

Java腳本：

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

     });   
} 

JSP代碼：

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

現在我的問題是，一切都只是在第一次工作正常。我的意思是每當我點擊first time範圍內的文本時，它將轉換成輸入字段並再次輸入onblur它將從輸入字段轉換回普通文本。但如果再次嘗試這樣做，它將無法正常工作。上面的腳本有什麼問題？

Answer 1

流浪漢 - 爲您節省一些時間，在這個答案的底部最後的選擇將最有可能您的首選解決方案

---

我相信這是你在找什麼：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); 

我的一類，而不是一個ID，所以你可以做多，但你可以切換回來，如果你想要的。如果你想使用ID：http://jsfiddle.net/2D9FW/1/

---

最近有人調升這使我的注意力又回到了它。這是另一種方式來做到這一點（改變DOM位）：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(); 

---

另外，如果你想支持對焦點選擇所有然後按Tab鍵去下一/上跨度/輸入，你可以這樣做（我喜歡這個選項最好）：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

首先，您還需要更改點擊處理程序以使用live()。不過，您應該注意，live()已被棄用了很長一段時間。您應該在兩種情況下都使用on()。

其次，當用span替換輸入時，不要給元素一個id。因此，該元素不再與您的點擊處理程序的選擇器匹配。

就個人而言，我會完全採取不同的（更簡單的）方法。我會同時擁有跨度和輸入中的標記。一個會隱藏，另一個會顯示。這樣可以減少嘗試重新創建DOM元素並提高性能時出錯的機會，因爲您不會不斷地從DOM中添加/刪除元素。

Answer 3

我瞭解你認爲元素替換是一件好事，但是，我會使用提示來獲取文本。爲什麼？這對用戶來說更容易，實際上也更漂亮一些。如果你對如何做到好奇，我會告訴你。

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

帶有id的smerny's excellent answer的更通用版本可以通過稍微改變兩行來製作： $input.attr("ID", "loadNum");變成$input.attr("ID", $(this).attr("ID")); - 這樣，它只需要當前的id，並保留它，不管它是什麼。

同樣， $span.attr("ID", "loadNum");變得$span.attr("ID", $(this).attr("ID"));

這只是允許的功能被應用到任何的div。添加了兩條相似的行，id和class都可以正常工作。請參閱example。

Answer 5

我在代碼中做了些許改變，通過使用這個輸入類型不能爲空，它將回到它的實際值。

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/