0

I can't set the focus on the input box through the 'mousedown' event from the canvas but I can do this with 'mouseup', why is that the case? Is this browser specific?(using chrome)

var canvas = document.getElementById('can');

 canvas.addEventListener('mousedown', (e)=>{
    document.getElementById('box').focus();
 })
<canvas id="can"></canvas>
<input type="text" id="box"></input>

var canvas = document.getElementById('can');

 canvas.addEventListener('mouseup', (e)=>{
    document.getElementById('box').focus();
 })
<canvas id="can"></canvas>
<input type="text" id="box"></input>

I have also fooled around with tabindex(tabindex='-1','0' or '1') but that doesn't work either for mousedown. So is my only option to use mouseup for this event?

m00n
  • 1,977
  • 2
  • 13
  • 25
rgex
  • 119
  • 9
  • Possible duplicate of [Why isn't this textarea focusing with .focus()?](https://stackoverflow.com/questions/8380759/why-isnt-this-textarea-focusing-with-focus) – Obsidian Age Oct 27 '17 at 00:41
  • ^ it's due to the order in which focus gets applied. `mousedown` -> `focus` -> `mouseup` -> `click`. Essentially, the element gets focus, then immediately loses it. – Obsidian Age Oct 27 '17 at 00:42

0 Answers0