input type text not allowing input or focus

Question

Question

I have a canvas element, above this I have a div with a text input in. The text input will not allow me to enter text or show the cursor or become focussed when clicked on.

Steps I have taken to resolve the issue myself

After exploring other questions similar to this I can disregard the following as the cause:

• z-index of the div being lower than the canvas (I can still see the input box)

• Not setting the positioning correctly (I have set the div to position: absolute)

• Setting select: none in the css (I do not have this)

I cannot paste all of my code because it's far too long but I can post the relevant sections:

setBuildingTileSet is the div containing the text input in question.

css

#setBuildingTileSet {
    height: 200px;
    left: 50%; 
    bottom: 50%;
    margin: -100px 0 0 -200px;
    position: absolute;
    width: 400px;
    opacity: 0.7;
    background: #000;
    z-index:1;
    padding: 20px;
}

html

<div id="container"></div>

<div id="setBuildingTileSet">
  <h1>Set Building TileSet </h1>
  <p><h2>Tileset name</h2></p>
  <input id="buildingTileSetName" type="text">
</div>

javaScript

canvas = document.createElement('canvas');
$('#container').append(canvas);
$('#container canvas')[0].id =('canvas');
context = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 600;

I'm completely stuck and can't see why the input box will not work. Thanks for your help people :)

Now solved - but reason why solution would cause error still unknown

Yay, after a lot of playing around with my code I found the 'problem'. I have a mouseDown event listener which activates various things when various UI buttons are clicked on:

CoffeeScript

window.addEventListener 'mousedown', (e) =>
  button = e.which or e.button
  if button == 1 then @UIMouseDown(e) # Left mouse click
, false

UIMouseDown: (e) =>
  e.preventDefault() 
  ......etc

Solution I found that when I removed e.preventDefault() then the textbox allowed me to enter text :)

Follow up Question Does anyone know why e.preventDefault() would cause this behaviour?

Answer 1

To answer your follow-up question:

e.preventDefault() cancels the default behaviour of an event. It makes sense if you compare it with other events:

• click: For <a href="..."> elements, the browser won't navigate like it does by default.
• submit: For <form> elements, the browser won't submit the form like it does by default.
• mousedown: The browser will not go through the mousedown process (such as setting focus on the element the mouse cursor currently is at) like it does by default.