将跨度转换为输入

Question

我正在开发网络应用程序，我有这样一个要求，即每当用户在span 中单击text 时，我需要将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

将您的 dom 结构更改为这样会很好（请注意，跨度和输入并排并在共享父级中 .inputSwitch

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

然后我们可以像这样做我们的 JS，它将支持全选焦点和 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

我对代码做了一点改动，通过使用这个输入类型不能为空，它会回到它的真实值。

 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/

Answer 3

可以通过稍微改变两行来制作更通用的带有 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 4

我知道您认为元素替换是一件好事，但是，我会使用提示来获取文本。为什么？它对用户来说更容易，实际上也更漂亮。如果您对如何操作感到好奇，我会告诉您。

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 5

首先，您需要将点击处理程序也更改为使用live()。不过，您应该注意，live() 已经被弃用了一段时间。你应该在这两种情况下都使用on()。

其次，当你用跨度替换输入时，你没有给元素一个id。因此，该元素不再与您的点击处理程序的选择器匹配。

就我个人而言，我会完全采用不同（且更简单）的方法。我将在我的标记中同时拥有跨度和输入。一个会被隐藏，而另一个会被显示。这将减少您在尝试重新创建 DOM 元素并提高性能时出错的机会，因为您不会经常在 DOM 中添加/删除元素。