After blur on input box, keydown events no longer seen

I made a div, when you press "e", it places a text box over the text. When you press tab, it takes the contents and places them into the div.

However, after this happens, it no longer recognizes key events until you click in the window again (I'm 90% certain it goes to the address bar -- at least that's what it does for me now in the jsfiddle link below -- but have tried so many things at this point that I have conflicting experiences).

http://jsfiddle.net/gt05Lwx4/

StackOverflow won't let me link to jsfiddle without having a code block (wtf?)

Solution

One way of working around this is making your #container focusable with a tabindex value that is greater than that of the temporary textbox. And then letting the browsers's default action do its thing with the tabindices (default behaviour is shifting focus to the element with the next higher tabindex).

Demo: http://jsfiddle.net/gt05Lwx4/2/

Code:

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

And when you add the textbox, do:

var textBox = $('<input type="text" tabindex="1" name="name"></input>')
...