mrdoob/three.js — pull request #2982 by erossignon (2013-01-25 23:11:21+00:00)
Title: * fix TrackballControls.js so that key events intercepted by the Trackba...

I would like to propose a fix for THREE.TrackballControls to prevent a annoying side effect with key events.

Imagine that we have a ThreeJS WebGL view that only fit a portion of the HTML page and that the rest of the page contains other html element such as textarea or input fields.

~~~~~~~~~~~~~~~{.html}

<textarea>
<input value='foo'></input>

<script> ...

container = document.getElementById( 'container' );

controls = new THREE.TrackballControls( camera , container);
...
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( container.clientWidth, container.clientHeight );

container.appendChild( renderer.domElement );

...

</script>
~~~~~~~~~~~~~~~

Imaging then that the user gives the focus to the textarea element and then start twiddling the trackball on the 3D view, and presses the "D" or "S" key to activate the pan only or zoom only mode.

In the current version, the key event will not be captured by the TrackballControls event handler and unwanted characters will appear in the input textarea.

this can be fix this way:
- give the focus artifically to the domElement when the user press the mouse on the 3D view
- install key event handler on the domElement instead of the window object
- stop event propagation and default processing when key event are received.

A sample html file has been provided to demonstrate the issue and check the proposed fix.