0

I have an HTML table with an input field in each cell. On focusin I append a div (basically a resizable overlay) to the cell. Jquery code:

$("input").on("focusin", function(){
  var selectionDiv = $("<div class='selection-div'><a href='#'></a></div>");
  $(this).parent().prepend(selectionDiv);
  selectionDiv.resizable();
  console.log("focusin");
}).on("focusout", function(){
  $(this).prev().remove();
  console.log("focusout");
});

The problem comes when I click in the cell. In Chrome the div is appended and the input gets the focus. When I click the same cell again, focusout and focusin gets called, and the div is appended again.

However in IE 11, when I click the second time on the same cell, only focusout is called and the div is removed. What is causing this behaviour?

I have a jsbin here: http://jsbin.com/tasujuzoqo/1/edit?html,css,js,console,output

marchello
  • 2,016
  • 3
  • 29
  • 39
  • It would appear that focusin and focusout are not supported in all browsers yet, at least not Firefox (not directly related to your question but just an example https://developer.mozilla.org/en-US/docs/Web/Events/focusin). What's preventing you from using focus and blur events? – Seano666 Mar 03 '16 at 00:27
  • Thank you for your answer, but firefox is irrelevant for me. `focusin` is supported in both IE and Chrome. Or do you think `focus` and `blur` would behave the same way in IE and Chrome? – marchello Mar 03 '16 at 11:02
  • In my experience, focus and blur are much more established and dependable events if you are thinking cross-browser. You are right focusin and focusout are technically supported in both IE and Chrome, but that doesn't mean they will act the same way. This is an interesting related post: http://stackoverflow.com/questions/7337670/how-to-detect-focusin-support – Seano666 Mar 03 '16 at 15:25

0 Answers0