将跨度转换为输入

Question

我正在开发网络应用程序,我有这样的要求,每当用户点击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/

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

我使用了一个类而不是一个ID,所以你可以做多个,但你可以根据需要将其切换回来.如果你想使用ID:http://jsfiddle.net/2D9FW/1/

最近有人提高了这一点,所以我的注意力又回到了原点.这是另一种方法(更改DOM):http://jsfiddle.net/2khuobze/

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

JS

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

此外,如果你想支持选择所有焦点和标签以进入下一个/上一个跨度/输入,你可以这样做(我最喜欢这个选项):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();