JSFiddle - React, Tailwind, and code Playground

by kishor_naik011

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-darkness/jquery-ui.min.css">
<link rel="stylesheet" href="http://mottie.github.com/Keyboard/css/keyboard.css">
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.js"></script>
<table border="1" cellpadding="5" cellspacing="5" align="center" width="70%">
                <tr>
                    <td style="width:25%">Alpha Numeric Pad</td>
                    <td style="width:45%">
                        <input name="txtAlphaNumPad" type="text" id="txtAlphaNumPad" style="width:250px;" />
                    </td>
                </tr>
                <tr>
                    <td style="width:25%">Num Pad</td>
                    <td style="width:45%">
                        <input name="txtNumPad" type="text" id="txtNumPad" style="width:100px;" />
                    </td>
                </tr>
            </table>

JavaScript

$(document).ready(function () {

            try
            {
                // Alpha Numeric Pad

                $("#txtAlphaNumPad").keyboard({
                    autoAccept: true
                });

                // Num Pad

                $("#txtNumPad").keyboard({
                    layout: 'num',
                    restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in 
                    preventPaste: true,  // prevent ctrl-v and right click 
                    autoAccept: true
                });

            }
            catch (E)
            {
                alert(E.message);
            }

        });