jQuery numeric keypad idea

Quick test of a numeric keypad in jQuery for possible use w/ Windows phone NOTE: Apparently doesn't work right in Firefox >.<

HTML

Random content filler text
<div id="numericInput" >
    <div id="numBox"></div>
    <table id="keypad" >
        <tr>
            <td class="key">1</td>
            <td class="key">2</td>
            <td class="key">3</td>
        </tr>
        <tr>
            <td class="key">4</td>
            <td class="key">5</td>
            <td class="key">6</td>
        </tr>
        <tr>
            <td class="key">7</td>
            <td class="key">8</td>
            <td class="key">9</td>
        </tr>
        <tr>
            <td class="btn">ー</td>
            <td class="key">0</td>
            <td class="btn">CLR</td>
        </tr>
    </table>
    General filler text to show that
</div>
the keypad will show over top of other content<br />
within the div and outside of the div

CSS

#numericInput{
    position:relative;
}
#numBox{
    width:150px;
    height:20px;
    text-align:right;
    border:solid 1px black;
    cursor:text;
    overflow:hidden;
}
#keypad{
    width:150px;
    height:200px;
    border:solid 1px black;
    display:none;
    position:absolute;
    top:22px;
    left:1px;
}
.key{
    border:solid 1px black;
    background-color:blue;
    text-align:center;
    font-weight:bold;
    color:white;
    cursor:pointer;
}
.key:hover{
    background-color:LightBlue;
}
.key:active{
    background-color:white;
}
.btn{
    border:solid 1px black;
    text-align:center;
    font-weight:bold;
    color:black;
    cursor:pointer;
    background-color:DimGray;
    width:33.3%;
}
.btn:hover{
    background-color:DarkGray;
}
.btn:active{
    background-color:LightGray;
}

JavaScript

$(document).ready(function(){
    $('#numBox').click(function(){
        $('#keypad').fadeToggle('fast');
        event.stopPropagation();
    });
    
    
    // Function commented out
    // due to Chrome apparently being the
    // only browser smart enough to work
    // right >.<
    
    //$('body').click(function(){
    //    $('#keypad').fadeOut('fast');
    //    event.stopPropagation();
    //});
    
    $('.key').click(function(){
        var numBox = document.getElementById('numBox');
        if(this.innerHTML == '0'){
            if (numBox.innerHTML.length > 0)
                numBox.innerHTML = numBox.innerHTML + this.innerHTML;
        }
        else
            numBox.innerHTML = numBox.innerHTML + this.innerHTML;
        
        event.stopPropagation();
    });
    
    $('.btn').click(function(){
        var numBox = document.getElementById('numBox');
        alert(this.innerHTML);
        if(this.innerHTML == '-'){
            
            if(numBox.innerHTML.length > 0){
                numBox.innerHTML = numBox.innerHTML.substring(0, numBox.innerHTML.length - 1);
            }
        }
        else{
            numBox.innerHTML = '';
        }
        
        event.stopPropagation();
    });
});