Chrome focus/blur show and hide bug

by maxgalbu

HTML

<input id="blurfield">
<button id="hellobutton">Hello world</button>
<br>
<br>

<input id="blurfieldjquery">
<button id="hellobuttonjquery">Hello world</button>
<br>
<br>

<input id="blurfieldjquerydistinct">
<button id="hellobuttonjquerydistinct">Hello world</button>

CSS

button {
    float:right;
    display:none;
}

JavaScript

document.getElementById("blurfield").onblur = 
    document.getElementById("blurfield").onfocus = function(evt) {
    var button = document.getElementById("hellobutton");
    if (evt.type == "focus")
        button.style.display = "inline-block";
    else
        button.style.display = "none";
    console.log("blurfield", evt.type);
}

$("#blurfieldjquery").bind("focus blur", function(evt) {
    if (evt.type == "focus")
        $("#hellobuttonjquery").show();
    else
        $("#hellobuttonjquery").hide();
    console.log("blurfieldjquery", evt.type);
});

$("#blurfieldjquerydistinct").bind("focus", function(evt) {
    $("#hellobuttonjquerydistinct").show();
    console.log("blurfieldjquerydistinct", evt.type)
});
$("#blurfieldjquerydistinct").bind("blur", function(evt) {
    $("#hellobuttonjquerydistinct").hide();
    console.log("blurfieldjquerydistinct", evt.type)
});