Convert a range for input

Question

I am developing a web application, I have such a requirement that whenever a user clicks text inside a span , I need to convert it to an input field and on blur I need to convert it back again again. Therefore, I use the following script on one of my jsp pages.

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 Code:

 <span id="loadNumId" onmouseover="javascript:covertSpan(this.id);">5566</span> 

Now my problem is that everything works just fine for the first time. I mean, whenever I click on text inside a range for first time , it is converted to an input field, and again onblur it hides back from the input field to plain text. But if you try to do it again, it won’t work. What happened to the above script?

Answer 1

It would be nice to change the dom structure to something like this (note that span and input are side by side and are inside the common parent .inputSwitch

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

Then we can do our JS as follows: it will support highlighting everything and tabs to go to the next / previous range / input: 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

First, you need to change the click handler to use live() . However, it should be noted that live() has long been deprecated. You should use on() in both cases.

Secondly, when you replace the input with a range, you do not give the element an identifier. Therefore, the item no longer matches the selector for your click handler.

Personally, I would take a completely different (and simpler) approach. I will have both a range and input in my markup side by side. One will be hidden while the other is shown. This will give you less chance of making mistakes when trying to recreate DOM elements and improve performance, since you will not constantly add / remove elements from the DOM.

Answer 3

I understand that you think replacing an element is a good thing, however I would use a tooltip to get the text. What for? It is much simpler and actually a bit prettier for the user. If you are interested in how to do this, I will show you.

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

A more general version of smerny excellent answer with id can be made by changing two lines: $input.attr("ID", "loadNum"); becomes $input.attr("ID", $(this).attr("ID")); - thus, it simply accepts the current identifier and stores it, whatever that is.

Similarly, $span.attr("ID", "loadNum"); becomes $span.attr("ID", $(this).attr("ID"));

It just allows you to use functions for any div. When adding two similar lines, both id and class work fine. See an example .

Answer 5

I changed the code a bit. Using this input type can not be blank, it will revert to its actual value.

  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/