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.
trades-notes-opt1-edit.JPG
kevin_ccmAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

robastaCommented:
I am not sure exactly how you want it to work but this maybe a good starting point:

http://www.9lessons.info/2010/03/facebook-like-expanding-textbox-with.html
0
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.
0
anilallewarCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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??
0
anilallewarCommented:
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"
</div>
0
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.