JQuery Edit in Place, No Plugins

Question

I'm trying to use Jquery (with no plugins) to enable an edit in place control. The functionality I would like is this. On click of paragraph, the paragraph will be converted into an editable text area. Once the user clicks out paragraph (loses focus) the text will be saved.

I have the following code below and currently part 1 is working, but when I click in the editable area textarea rows="10" cols="160 gets generated and I can't type. Here is what I have

$("#Para1").click(function () {
            var textarea = '<div><textarea rows="10" cols="160">' + $(this).html() + '</textarea>';
            $(this).html(textarea);
            $("textarea.textarea").focus();

            $("textarea.textarea").blur(function () {
                var value = $(this).val();
                $("#Para1").text(value);

            });

I have tried to base my code per the link below, but haven't had success.

http://www.unleashed-technologies.com/blog/2010/01/13/jquery-javascript-easy-edit-place-input-boxes-and-select-boxes

score 1 · Answer 1 · answered Aug 19 '13 at 19:22

$("#Para1").click(function () {
    var textarea = '<div><textarea class="editable" rows="10" cols="160">' + $(this).html() + '</textarea>';
    $(this).html(textarea);
    $("textarea.editable").focus();

    $("textarea.editable").blur(function () {
        var value = $(this).val();
        $("#Para1").html(value);

    });
});

You don't have class assigned to your textarea in your generated html. But, you are referencing it by the class .textarea. I added a class of editable and changed your reference to textarea.editable.

score 1 · Answer 2 · answered Aug 19 '13 at 19:32

Try this

http://jsbin.com/UmelOku/1/edit?html,js,output

Here is the code JS:

$("#Para1").click(function () {
  $(this).css('display','none');
  $('textarea').css('display', 'block');
  $('textarea').val($(this).text());
  $('textarea').focus();
});

  $('textarea').blur(function () {
  var value = $(this).val();
  $("#Para1").text(value);
  $(this).css('display','none');
  $('#Para1').css('display', 'block');
  });

HTML:

<p id="Para1">Test</p>
<textarea style="display:none;" rows="10" cols="160"></textarea>

thanks for the advice I'm gonna mark eric's has answer just cuz its a little cleaner if I could mark 2 i would — CSharper, Aug 19 '13 at 19:36

Eric Eijkelenboom · Accepted Answer · 2013-08-19T19:44:09.400

I would solve this using 2 html elements, that are shown/hidden when necessary:

<div id="Para1">blabla</div>
<textarea id="editable" style="display:none" rows="10" cols="160"></textarea>

Then use the following Javascript:

$("#Para1").click(function () {
    $('#editable').html($(this).html()).show().focus();
    $(this).hide();
});

$("#editable").blur(function () {
    $('#Para1').html($(this).val()).show();
    $('#editable').hide();
});

EDIT: moved the click handler on '#editable' outside of the '#Para1' click handler. No need to hook it up multiple times. Updated fiddle here.

An example JsFiddle can be found here.

Perfect, would you in that case please mark this response as a final answer? :) — Eric Eijkelenboom, Aug 19 '13 at 19:46

score 0 · Answer 4 · edited May 23 '17 at 11:43

0

You could use the HTML5 contenteditable="true"

<p contenteditable="true">
    Lorem ipsum
</p>

Next you should attach a handler to the event blur of the paragraph as explained on this post to save de data.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 19 '13 at 19:22

Carlos487

1,459
13
17

JQuery Edit in Place, No Plugins

4 Answers4