Преобразование Промежуток к входу

Question

Я занимаюсь разработкой веб-приложение, у меня есть такое требование, что всякий раз, когда пользователь нажимает на text внутри span мне нужно convert его в input field и on blur мне нужно convert it back снова охватить. Поэтому я использую следующий скрипт на одной из моих jsp-страниц.

Java Script:

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

---

Кроме того, если вы хотите, чтобы поддержать выбор все в центре внимания и обходе, чтобы добраться до следующий/предыдущий диапазон/вход, вы можете сделать это (Мне нравится этот вариант лучший): 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().

Во-вторых, при замене ввода диапазоном вы не даете элементу идентификатор. Поэтому элемент больше не соответствует селектору для вашего обработчика кликов.

Лично я бы принял совсем другой (и более простой) подход. У меня будет как диапазон, так и входные данные в моей разметке бок о бок. Один будет скрыт, пока будет показан другой. Это даст вам меньше шансов совершить ошибки при попытке воссоздать элементы DOM и повысить производительность, поскольку вы не будете постоянно добавлять/удалять элементы из DOM.

Answer 3

Я понимаю, что вы считаете, что замена элемента - хорошая вещь, однако я бы использовал подсказку для получения текста. Зачем? Это намного проще и на самом деле немного красивее для пользователя. Если вам интересно, как это сделать, я покажу вам.

HTML:

<span class='editable'>foobar</span> 

ЯШ:

$(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

Более общую версию smerny's excellent answer с идентификаторами можно сделать, слегка изменив две строки: - таким образом, он просто берет текущий идентификатор и сохраняет его независимо от того, что он есть.

Аналогично, $span.attr("ID", "loadNum"); становится $span.attr("ID", $(this).attr("ID"));

Это просто позволяет функции, которые будут применены к любому дел. При добавлении двух похожих строк оба id и class работают нормально. См. example.

Answer 5

Я немного изменил код, используя этот тип ввода can not be blank, он вернется к своей реальной стоимости.

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/