Question

I asked some usability experts about a rotating cube form I made. They correctly pointed out that when the face of the cube with the text boxes is not visible, they do not register any input.

That means that when the cube spins around and the user is still typing, it only registers what the user typed in while it was still visible. This is clearly something I need to fix.

A face of a cube is dynamically hidden with the css rule display: none, and then shown again with display: block.

Is it possible to make a textbox register input when it is inside a div that has display: none? Do I need to hide it some other way so that it will register input?

Answer 1

You could use something like position: absolute; left: -2000px to hide it off-screen but still able to accept input. This has the added bonus of the element still being “there” – someone can tab into it, screen readers can still tell it’s there, rather than just “It’s gone.”