I’m working on a site where clicking on a td cell creates a text

Question

0

Asked: June 6, 20262026-06-06T19:40:34+00:00 2026-06-06T19:40:34+00:00

I’m working on a site where clicking on a td cell creates a text

0

I’m working on a site where clicking on a td cell creates a text input (or select/option dropdown) which is set to the current value of the td and the text input is given the focus.

This version allows people to click on a td to put the content into a text input, possibly edit it, and press enter or click somewhere else or change windows to blur it and save it to the td:

http://jsbin.com/emuneq/7/edit#source

The problem is that clicks happen on mouseup and blurring happens on mousedown so the automatically resizing table changes between the mousedown and mouse up.

This can be seen by clicking on the first yellow cell (it creates a text field when the mouse is released), then slowly clicking and releasing the mouse on cell 2. While you press the mouse down, the previous text field is blurred and this resizes the table cells and when you release you are now in cell 3. For a click to work, the object for the mousedown and mouseup must be the same, but mouse down was made in cell 2 and mouse up was in cell 3, so no click is detected.

This version uses the mouseup event:

http://jsbin.com/emuneq/8/edit#source

If you click on cell 1, then mousedown on cell 2 (blurring the previous text field), then stay in the same position it will mouseup over cell 3 and a text field will be created in cell 3.

What I want to happen is the text field creation happen on mousedown, before the table columns are resized.

This version uses the mousedown event:

http://jsbin.com/emuneq/13/edit#source

I added “e.preventDefault();” to the mousedown function – if this isn’t there the blur function stops mousedown from working.

“focus()” allows you to type text or press delete at the left side of the text field but it seems to completely ignore mouse clicks to move the cursor around or select the text… though you can move the text cursor using the arrow key.

Well in IE7 and IE8 it detects you pressing enter, but you can’t initially type in anything until you use the mouse to give the text input focus. With the mouse you can also highlight the text or move the text cursor around.

But in IE9 and Firefox 11 the text input ignores the mouse. In Chrome 19, focus() highlights the text but it also ignores the mouse completely.

Anyway, the previous link is almost perfect except that it ignores the mouse in the text field (except for IE7 and IE8).

Here is a version that uses a select/option dropdown instead of a text field:

http://jsbin.com/emuneq/15/edit#source

This uses mousedown like before – but the dropdowns won’t open at all in IE9, Firefox, and Chrome. They work fine in IE7 and IE8.