I need a dropdown text box in Javascript (jQuery?)

Question

I have to make a page with a huge table of data, and it has to be editable. The problem is, some of the fields are supposed to be very long (hundreds of characters), and I need some sort of way to enter this text without disrupting the table's layout, but showing the users the entire text while they're typing.

A good solution would be something that looks just like a vanilla 1-line text box which, when clicked, slides out, pretty much like a <select>, lets the user type in all the text he wants, and then shrinks back to text box size when the user clicks away.

I'm sure there must be something like that for jQuery, but I just can't find it.

Here's how it should act:

emilyk · Accepted Answer · 2012-03-17 20:45:38Z

1

Here's what I figured out playing around with some javascript

http://jsfiddle.net/bsWy6/

You can mess with the styling until it is exactly what you want. I think it's pretty close to what you're looking for though.

I am assuming you are populating your table from a database? If that's true, I would use php to generate the id's so that you don't have to type them for every single row, since your functions need to know the exact cell it's working with. If you want help with that code too, just let me know and I'll post it up here. I'm just not sure if you've done anything with php, so I don't want to go into all of it if you don't want it.

Good luck!

answered Mar 17, 2012 at 20:45

emilyk

7235 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

intellidiot · Accepted Answer · 2012-03-17 17:09:34Z

1

I think NicEditor will fit the need. See their inline editing demo.

answered Mar 17, 2012 at 17:09

intellidiot

11.2k4 gold badges37 silver badges41 bronze badges

3 Comments

Alda Over a year ago

Looks nice, thanks, but the boxes it creates don't return automatically to 1-line size, so the table would be pretty much ruined.

ajax333221 Over a year ago

it is amazing, I don't know how, but ctrl+z really undo the last action

Alda Over a year ago

But it gets rid of the entered text! This is how it should act: http://i.imgur.com/TY5tk.png

dotancohen · Accepted Answer · 2012-03-17 17:06:03Z

0

For each cell, make two fields:

<td id="td-1-2">
    <p id="p-1-2">Some text to...</p>
    <textarea id="ta-1-2">Some text to...</textarea>
</td>

Then hide the <textarea> and show the <p>. When the user clicks the <p> then hide the <p> and show the <textarea>. Either put a submit button below the textarea or save its contents when it looses focus.

answered Mar 17, 2012 at 17:06

dotancohen

31.8k43 gold badges147 silver badges208 bronze badges

Collectives™ on Stack Overflow

I need a dropdown text box in Javascript (jQuery?)

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related