how to create inline editable field. when i click on a text it turn into a inline input text type

how to create inline editable field. when i click on a text it turn into a inline input text type. and the same case with the paragraph it convert into inline textarea. and the most important is that it should save it state when i click out side or focused out but don't submit the data until开发者_StackOverflow i pressed save button. in the last it should send data in ajax.

 i am a one liner text 

 i am a paragraph 

I am not going to write the whole code for what you ask for but your course of action is:

1. Add click event listeners to the relevant elements, my suggestion is to use designated class for all of them.

2. in the handler, replace the dom element of the sender element with a text field /texteare (you can check here if the sending element was a SPAN or P and decide accordingly) and with a save button. The save button should "know" the input field it relates to (can be done either using .data or by just assuming that it's always the element before the button)

3. Add a click event handler to the save button to handle the ajax saving for you. this handler should be a generic one that finds the relevant field and submits its value to a server side handler.

4. upon save success, remove the field element and button from the DOM and replace them with a SPAN / P with the updated text.

Hope it makes sense to you an dhelps you find your way. If you need help with a specific step you can open a new quesion for it and link to it from here.

I konw the question is old but I think in this website have a good example. Facebook-Style Inline Profile Edit Fields with Ajax