7

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

现在我的问题是，只有第一次一切正常。我的意思是每当我单击 span 内的文本时，first time它都会转换为输入字段，然后再次onblur从输入字段转换回普通文本。但是如果再试一次就不行了。上面的脚本有什么问题？

4

5 回答 5

17

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

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

然后我们可以像这样做我们的 JS，它将支持选择所有焦点和选项卡以进入下一个/上一个跨度/输入：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();
于 2013-05-04T12:25:04.673 回答
1

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

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

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

于 2013-05-04T12:06:40.457 回答
1

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

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/

于 2013-05-04T12:20:27.567 回答
0

可以通过稍微改变两行来制作 smerny 的 id 出色答案的更通用版本：$input.attr("ID", "loadNum");变得$input.attr("ID", $(this).attr("ID"));- 这样，它只需获取当前 id 并保留它，无论它是什么。

同样， $span.attr("ID", "loadNum");变成$span.attr("ID", $(this).attr("ID"));

这只是允许将函数应用于任何 div。添加了两条类似的行后， id 和 class 都可以正常工作。见例子。

于 2015-09-09T20:56:33.320 回答
0

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

 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/

于 2016-05-26T04:46:03.477 回答