jQuery Numeric Keypad Plugin with Example

A custom on-page numeric keypad is a useful component to enter digits input. It is most commonly used on webpages/apps to enter pin code,  small digits input, and any kind of numbers. It allows users to input number values using the mouse by click on the keys. In this tutorial, we’ll create a simple numeric keypad using a jQuery plugin and CSS.

As you have seen in the above preview, the keypad comes with a simple and clean design. It allows users to enter digits value along with the delete and clear values options. This keypad can be easily customized by changing a few CSS values.

Basically, there is no option to integrate this keypad into existing inputs. But you can append this keypad to HTML forms to enter values or show on input focus event. If you want to use it separately to facilitate users to enter numeric values then you can also use copy-to-clipboard functionality with its input. So, let’s get started on how you can integrate this keypad into your project.

How to Create jQuery Numeric Keypad

In the very first step, load the jQuery JavaScript library and "numeric-keypad" Js file into the head tag of your HTML page.

<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
    
<!-- Numeric Keypad JS -->
<script src="js/numeric-keypad.js"></script>

After that create an HTML structure for the numeric keypad as follows:

<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>

You can place the above HTML structure anywhere on your webpage where you want to show the numeric keypad.

Style Keypad using CSS

After creating the HTML structure, now it’s time to style the keypad using CSS. So, target the "input-numeric-container" class that is the main container of the keypad. Define its background, padding, margin, and max-width property as follows:

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

Similarly, target the "input-numeric" class to define the style for the input box. Define 100% value for the width, padding, margin, border, and outline as described below:

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

We arranged keys in the table, select the "table-numeric" class and define a hundred percent width. Use the CSS border-collapse property to forbade border doubling. Likewise, select the "td" element and define its 33.3% width in order to make each key responsive. Align the text to the center and specify the “top” value for the vertical-align property.

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

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

Now, select the “button” element of the "table-numeric" class and define its relative position. Similarly, define the width, box-sizing, font size, outline, and user-select property as follows:

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

Finally, define the style for the "key" class that specifies numeric keys. Define background and border as mentioned below. Similarly, define the style for the clear and delete key. You can set custom background and color values in order to customize the keypad.

.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;
}
[data-numeric="hidden"] .table-numeric {
display: none;
}

That’s all! hopefully, you have successfully created a numeric keypad using jQuery and CSS. If you have any questions or suggestions, let me know by comment below.