i've got the following request:

create a plain text field that transforms into an text input element when clicking on an edit trigger. When leaving the input element the text will be stored in the database and the field is transformed back into a plain text field with the new content. When ESC is pressed in the input the recent value is restored. To do this i use the following code:

<div id="value"><span id="text">some text</span></div>
<div id="trigger">[EDIT]</div>
<div style="display: none;" id="storage">
  <input type="text" id="input" value="some text"/>
</div>

<script type="text/javascript">
  $('#trigger').click(function() {
    var t = $('#text').detach();
    var e = $('#input').detach();

    $('#storage').append(t);
    $('#value').append(e);
    e.focus();
  });

  $('#input').blur(function() {
    var t = $('#text').detach();
    var e = $('#input').detach();

    if (t.text() != e.val()) {
      $.getJSON(...);
    }

    $('#storage').append(e);
    $('#value').append(t);
  });

  $('#input').keyup(function(event) {

    if (event.which == 27) {
      $('#input').val($('#text').text());
      $('#input')[0].blur();
    }

  });

</script>

Thanks to @nnnnnn this now works. But is there maybe a simpler way to implement this using some preexisting API functions?

thanks very much.

i've got the following request:

create a plain text field that transforms into an text input element when clicking on an edit trigger. When leaving the input element the text will be stored in the database and the field is transformed back into a plain text field with the new content. When ESC is pressed in the input the recent value is restored. To do this i use the following code:

<div id="value"><span id="text">some text</span></div>
<div id="trigger">[EDIT]</div>
<div style="display: none;" id="storage">
  <input type="text" id="input" value="some text"/>
</div>

<script type="text/javascript">
  $('#trigger').click(function() {
    var t = $('#text').detach();
    var e = $('#input').detach();

    $('#storage').append(t);
    $('#value').append(e);
    e.focus();
  });

  $('#input').blur(function() {
    var t = $('#text').detach();
    var e = $('#input').detach();

    if (t.text() != e.val()) {
      $.getJSON(...);
    }

    $('#storage').append(e);
    $('#value').append(t);
  });

  $('#input').keyup(function(event) {

    if (event.which == 27) {
      $('#input').val($('#text').text());
      $('#input')[0].blur();
    }

  });

</script>

Thanks to @nnnnnn this now works. But is there maybe a simpler way to implement this using some preexisting API functions?

thanks very much.

• javascript
• jquery
• html
• user-interface

Share Improve this question Follow edited Mar 29, 2012 at 9:48 LordHelmchen asked Mar 28, 2012 at 20:37 LordHelmchenLordHelmchen 14933 silver badges1212 bronze badges 7

• Shouldn't ${'#someActiveInput'}.focus(); be $('#someActiveInput').focus();? – j08691 Commented Mar 28, 2012 at 20:38
• maybe it's a little too late (12 hours at work already) but i can't see a difference between my version and yours? Nevertheless - this was only an example how it works - so this is not the problematic part ;) – LordHelmchen Commented Mar 28, 2012 at 20:44
• Curly braces vs. parenthesis. Not that this is a solution, just a question about whether this way a typo or intentional. – j08691 Commented Mar 28, 2012 at 20:47
• definitively too late - yes you're right - it have to be parenthesis - updated it. – LordHelmchen Commented Mar 28, 2012 at 20:50
• I know this isn't directly addressing your issue, but the contenteditable attribute will make non-form elements interactive like text areas, and I believe automatically fire the blur and focus events from the UA, so jquery should catch them. If having a trigger is important (you want a visual control, etc), you could simply have the control give focus to the element with contenteditable set to true. It's supported in all major non-mobile browsers (IE6+, even). – Anthony Commented Mar 28, 2012 at 21:08

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

use jquery editable here is a link

for demo: http://www.appelsiini/projects/jeditable/default.html

for plugin home page http://www.appelsiini/projects/jeditable

I developed a plugin that do what you need:

$.convertTo

I hope it will be helpful, regards.