Input tag with Three.js not working

Question

I'm currently working on a game with Three.js. I'm using the Web GL renderer, which takes up the entire browser window. Now I want to make a chat box, so I put an input tag inside like this

<input id="chatMessageDiv" type="text" value="Message..."></input>

and for the CSS

#chatMessageDiv {
    position: absolute;
}

My problem is I can't click on the input form to change the message. The cursor changes to the text icon but when I click nothing happens.

I tried changing the inputs z-index to 1 but that didn't work either. I don't really want to add an orbit controller or a trackball controller.

You have not given us enough information to really help you. It may be a simple z-index/position problem like [THIS](http://stackoverflow.com/questions/22151271/placing-absolute-behind-relative-positioned-element) — 2pha, Dec 09 '16 at 17:10
Did you had OrbitControls.js or something or some controls??? this take the control of most of you handlers in chrome you F12 go to Elements -> Event Listeners, you can check the script in charge of the event Listerners. I guess you can play with that :) — Peko Chan, Mar 20 '19 at 15:00

score 0 · Answer 1 · answered Dec 09 '16 at 20:20

You only need put your input #chatMessageDiv before the div containing your canvas.

<input id="chatMessageDiv" type="text" value="Message..."></input>
<div> 
     <canvas width="1370" height="395" style="width: 1370px; height: 395px;"></canvas>
</div>

This is because of the behavior of the canvas.

Note: check the element div with id = info.

Demo webgl animation cloth

Code webgl animation cloth

score 0 · Accepted Answer · edited Dec 10 '16 at 16:13

0

It looks like your problem is still not solved. A reason why your input field doesn't react might be that there is a event.preventDefault() which prevents it from it.

edited Dec 10 '16 at 16:13

Arun Kumar Mohan

11,517
3
23
44

answered Dec 10 '16 at 16:07

Der Kasperle

16
1

score 0 · Answer 3 · answered Oct 12 '20 at 13:55

Probably your document has some event listeners due to the Orbit Controls or others. To fix this same issue i modified the event mousedown listener in a way that it is bound only on the canvas(scene) elements alone.

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

Becomes :

var cc = document.getElementsByTagName("canvas");
    cc[0].addEventListener( 'mousedown', onDocumentMouseDown, false );

Input tag with Three.js not working

3 Answers3