asp.net - JQuery Edit in Place, No Plugins -
i'm trying use jquery (with no plugins) enable edit in place control. functionality this. on click of paragraph, paragraph converted editable text area. once user clicks out paragraph (loses focus) text saved.
i have following code below , part 1 working, when click in editable area textarea rows="10" cols="160 gets generated , can't type. here 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 base code per link below, haven't had success.
i solve using 2 html elements, shown/hidden when necessary:
<div id="para1">blabla</div> <textarea id="editable" style="display:none" rows="10" cols="160"></textarea>
then use 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 click handler on '#editable' outside of '#para1' click handler. no need hook multiple times. updated fiddle here.
an example jsfiddle can found here.
Comments
Post a Comment