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

将你的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();

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

我在代码中做了很少的改动，通过使用这个输入类型不能为空，它将恢复到它的实际值。

 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/

将跨度转换为输入

4 个答案: