i’ve got the following request: create a plain text field that transforms into an

Question

0

Asked: June 1, 20262026-06-01T02:20:05+00:00 2026-06-01T02:20:05+00:00

i’ve got the following request: create a plain text field that transforms into an

0

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.