Elegant text entry on web page using Javascript/HTML/etc (ala Facebook)

I would like to code up a text entry box similar to the one on one's Facebook profile page, in the box below your profile picture that says, "Write something about yourself."  When you click on the box, a cursor appears.  You can type in it, then when you lose focus it saves to Facebook's database(s) and the "boxiness" of it goes away.  Requires a click on an icon to edit/delete.

Is this possible (and easily done) using HTML/javascript?  I have a simple HTML table, and in one column I currently have a text input in each row.  So that's roughly how the set up would be (doesn't have to use an HTML text box, that's just what I have now).  Thanks!

I've attached a pic.
Who is Participating?
anilallewarConnect With a Mentor Commented:
You could use <div> block with style display:none at the start to hide the box and then change the style to display:block to show it once the user clicks on the link.

On the focus lost event, you would need to make an Ajax call to update the information in the database. Ajax is pretty simple and you would find lots of examples on the net.
robastaConnect With a Mentor Commented:
I am not sure exactly how you want it to work but this maybe a good starting point:

kevin_ccmAuthor Commented:
ah thanks, but i was hoping to not need jquery or any extra add-ons.  also, i guess i'm looking more for something like the "write something about yourself" box, not the status update one.
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

kevin_ccmAuthor Commented:
great, i didn't know about the display:[none|block] so i'll try it out.  i already have some ajax database calls hooked up elsewhere on the page so that shouldn't be a problem.  thanks for the advice

actually, will that block the text as well??
no..have it something like this so that your text is always visible
<a href="javascript:showDiv();"> Click for data input</a>
<div style="display:none" id="showclicked">
         put whatever you want an which will be shown when you change the style to display:block for element with id "showclicked"
kevin_ccmAuthor Commented:
thanks for the help.  i decided to go an easier route (basic text input with hyperlinks calling ajax routines) but will give you guys some points for the suggestions.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.