Keyboard number with jQuery

Keyboard number with jQuery

by Adi Jaya

HTML

<!-- ================= DEMO 1 ===================== -->
<div class="input-numeric-container">
    <input class="input-numeric" type="nember" readonly/>
    <table class="table-numeric">
        <tbody>
            <tr>
                <td><button type="button" class="key" data-key="1">1</button></td>
                <td><button type="button" class="key" data-key="2">2</button></td>
                <td><button type="button" class="key" data-key="3">3</button></td>
            </tr>
            <tr>
                <td><button type="button" class="key" data-key="4">4</button></td>
                <td><button type="button" class="key" data-key="5">5</button></td>
                <td><button type="button" class="key" data-key="6">6</button></td>
            </tr>
            <tr>
                <td><button type="button" class="key" data-key="7">7</button></td>
                <td><button type="button" class="key" data-key="8">8</button></td>
                <td><button type="button" class="key" data-key="9">9</button></td>
            </tr>
            <tr>
                <td><button type="button" class="key-del" disabled>Del</button></td>
                <td><button type="button" class="key" data-key="0">0</button></td>
                <td><button type="button" class="key-clear" disabled>Clear</button></td>
            </tr>
        </tbody>
    </table>
</div>


<!-- ================= DEMO 2 ===================== -->
<div class="input-numeric-container">
    <input class="input-numeric" type="nember" readonly/>
    <table class="table-numeric">
        <tbody>
            <tr>
                <td><button type="button" class="key" data-key="1">1</button></td>
                <td><button type="button" class="key" data-key="2">2</button></td>
                <td><button type="button" class="key" data-key="3">3</button></td>
            </tr>
            <tr>
                <td><button type="button" class="key" data-key="4">4</button></td>
               ...

CSS

html {
    font-size: 15px;
    font-family: sans-serif;
}

body {
    background: #4e4e4e;
    font-size: 1em;
}

.input-numeric-container {
    background: #fff;
    padding: 1em;
    margin: 1em auto;
    max-width: 350px;
}

.input-numeric {
    width: 100%;
    padding: 0.8em 0.2em;
    margin-bottom: 0.8em;
    box-sizing: border-box;
    border: 1px solid silver;
    outline-color: #4CAF50;
}

.table-numeric {
    width: 100%;
    border-collapse: collapse;
}

.table-numeric td {
    vertical-align: top;
    text-align: center;
    width: 33.33333333333%;
    border: 0;
}

.table-numeric button {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.3em;
    font-size: 1em;
    border-radius: 0.1em;
    outline: none;
    user-select: none;
}

.table-numeric button:active {
    top: 2px;
}

.key {
    background: #fff;
    border: 1px solid #d8d6d6;
}

.key-del {
    background: #FF9800;
    border: 1px solid #ca7800;
    color: #fff;
}

.key-clear {
    background: #E91E63;
    border: 1px solid #c70a4b;
    color: #fff;
}

button[disabled] {
    opacity: 0.5;
    cursor: no-drop;
}

JavaScript

$( document ).ready(function(){


	$( document ).on( "change", ".input-numeric", function(){
    
    	var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");
        var nonKeys = parents.find( ".key-del, .key-clear");
        var inputValue = input.val();
                
        if( inputValue == "" ){
        	nonKeys.prop( "disabled", true );
        } else {
        	nonKeys.prop( "disabled", false );
        }
        
    });
    
    
    //key numeric
    $( document ).on( "click", ".key", function(){
    
    	var parents = $( this ).parents( ".input-numeric-container" );
    	var number = $( this ).attr( "data-key" );
        var input = parents.find( ".input-numeric");
        var inputValue = input.val();
        
        input.val( inputValue + number ).change();
        
    });
    
    
    //delete
    $( document ).on( "click", ".key-del", function(){
    
    	var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");
        var inputValue = input.val();
        
        input.val( inputValue.slice(0, -1) ).change();
        
    });
    
    
    //clear
    $( document ).on( "click", ".key-clear", function(){
    
    	var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");
        
        input.val( "" ).change();
        
    });
    
    
});