一度クリックしたボタンからフォーカスを外す

Question

単純な電卓プロジェクトを終了します。 あなたがcodepenで見るように。私が計算をするとき、例えば "2 + 3"をしたら、キーボード入力ボタンを押します。それは答えを返しますが、また3に再び入ります（最後の入力）。 これは、フォーカスが最後にクリックされたボタン上にあるためです。

これを修正するにはどうすればよいですか？

http://codepen.io/kreitzo/pen/RapEqp

HTML

<div id="calculator"> 
    <div id="screen"> 
    <div id="calc">0</div> 
    <div id="result">0</div> 
    </div> 
    <button class="value">1</button><button class="value">2</button><button class="value">3</button><button class="value">+</button><button class="value">4</button><button class="value">5</button><button class="value">6</button><button class="value">-</button><button class="value">7</button><button class="value">8</button><button class="value">9</button><button class="value">*</button><button class="value">.</button><button class="value">0</button><button class="CE"> &larr;</button><button class="value">/</button><button class="equals">=</button><button class="C">C</button> 

</div> 

CSS

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700); 
body { 
    text-align: center; 
    background: -webkit-linear-gradient(to top right, #4d48c0, #56BF6D); 
    /* Safari */ 
    background: -o-linear-gradient(to top right, #4d48c0, #56BF6D); 
    /* Opera */ 
    background: -moz-linear-gradient(to top right, #4d48c0, #56BF6D); 
    /* Mozilla */ 
    background: linear-gradient(to top right, #4d48c0, #56BF6D); 
    /* Standard */ 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 

button:focus {outline:0;} 

#calculator { 
    font-family: "Quicksand", sans-serif; 
    margin: 60px auto; 
    padding: 0; 
    width: 300px; 
    background-color: #1D1E22; 
} 

#screen { 
    height: 150px; 
    width: auto; 
    background-color: #4269F4; 
    color: whitesmoke; 
} 

#screen #calc { 
    padding-top: 30px; 
    font-size: 20px; 
} 

#screen #result { 
    font-size: 50px; 
} 

.value, 
.equals, 
.C, 
.CE { 
    margin: 0; 
    width: 75px; 
    height: 60px; 
    font-size: 25px; 
    background-color: #1D1E22; 
    color: white; 
    border: none; 
} 

.value:hover, 
.equals:hover, 
.C:hover, 
.CE:hover { 
    font-size: 25px; 
    background-color: #1a1a1a; 
    color: whitesmoke; 
    border: none; 
} 

JS

$(document).ready(function() { 

    var string = ""; 

    /* Calculator input string */ 
    $(".value").click(function() { 
    string += $(this).text(); 
    $("#calc").text(string); 
    }); 

    /* Clear all */ 
    $(".C").click(function() { 
    string = ""; 
    $("#calc, #result").text("0"); 
    }); 
    /* Clear last entry */ 
    $(".CE").click(function() { 
    string = string.slice(0, string.length - 1); 
    $("#calc").text(string); 
    }); 

    /* Show result */ 
    $(".equals").click(function() { 
    $("#result").text(eval(string)); 
    }); 

    /* Enabling keyboard input */ 

    $(document).keydown(function(event) { 

    /* Numbers */ 
    if (event.which == 48) { 
     string += 0; 
     $("#calc").text(string); 
    } 
    if (event.which == 49) { 
     string += 1; 
     $("#calc").text(string); 
    } 
    if (event.which == 50) { 
     string += 2; 
     $("#calc").text(string); 
    } 
    if (event.which == 51) { 
     string += 3; 
     $("#calc").text(string); 
    } 
    if (event.which == 52) { 
     string += 4; 
     $("#calc").text(string); 
    } 
    if (event.which == 53) { 
     string += 5; 
     $("#calc").text(string); 
    } 
    if (event.which == 54) { 
     string += 6; 
     $("#calc").text(string); 
    } 
    if (event.which == 55) { 
     string += 7; 
     $("#calc").text(string); 
    } 
    if (event.which == 56) { 
     string += 8; 
     $("#calc").text(string); 
    } 
    if (event.which == 57) { 
     string += 9; 
     $("#calc").text(string); 
    } 
    /* Enter/show result */ 
    if (event.which == 13) { 
     $("#result").text(eval(string)); 
    } 
    /* Backspace */ 
    if (event.which == 8) { 
     string = string.slice(0, string.length - 1); 
     $("#calc").text(string); 
    } 
    /* Clear all with escape or del */ 
    if (event.which == 27) { 
     string = ""; 
     $("#calc, #result").text("0"); 
    } 

    }); 

    $(document).keypress(function(event) { 
    /* Start of operators */ 
    if (event.which == 43) { 
     string += '+'; 
     $("#calc").text(string); 
    } 
    if (event.which == 45) { 
     string += "-"; 
     $("#calc").text(string); 
    } 
    if (event.which == 42) { 
     string += "*"; 
     $("#calc").text(string); 
    } 
    if (event.which == 47) { 
     string += "/"; 
     $("#calc").text(string); 
    } 
    if (event.which == 46) { 
     string += "."; 
     $("#calc").text(string); 
    } 
    }); 

}); 

Answer 1

だけの行を変更します。お役に立てれば。

Answer 2

あなたは.blur();内側のボタンをトリガすることができますあなたは、おそらくのためにあなたの​​ハンドラでデフォルトの動作を妨げるべきで

$(".value").click(function() { 
    string += $(this).text(); 
    $("#calc").text(string); 
    $(this).blur(); 

}); 

Answer 3

例えば
キーを入力します。これはもはや、フォーカスのあるボタンのクリックをトリガーにそれを引き起こさないだろう

event.preventDefault(); 

。

$(".value").mousedown(function() { 

に

$(".value").click(function() { 

、それが動作します：