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 placeholder="exp: 0123456"/>
    <table class="table-numeric hidden">
        <caption>
            <span class="close" role="button" tabindex="-1">Close</span>
        </caption>
        <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" data-key=".">.</button></td>
                <td><button type="button" class="key" data-key="0">0</button></td>
                <td><button type="button" class="key" data-key=",">,</button></td>
            </tr>
            <tr>
                <td><button type="button" class="key-del" disabled>Del</button></td>
                <td><button type="button" class="key-clear" disabled>Clear</button></td>
                <td><button type="button" class="key-close">Close</button></td>
            </tr>
        </tbody>
    </table>
</div>

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.hidden {
    display: none;
}

.table-numeric caption {
    text-align: right;
}

.table-numeric .close {
    cursor: pointer;
    color: #7b7b7b;
    margin-bottom: 0.5em;
    display: inline-block;
    zoom: 1;
}

.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;
}

.key-close {
    background: #555;
    border: 1px solid #333;
    color: #fff;
}

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

JavaScript

$( document ).ready(function(){

	//show table
	$( document ).on( "click focus", ".input-numeric", function(){
    	var next = $( this ).next( ".table-numeric" );
        next.removeClass( "hidden" );
    });

	$( 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();
        
    });
    
	//close table
	$( document ).on( "click", ".table-numeric .close, .key-close", function(){
    	var parents = $( this ).parents( ".table-numeric" );
        parents.addClass( "hidden" );
    });
    
});