JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<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 style="width: 21%">
    <tr>
        <td style="width: 138px">
        <input class='num' name="Text1" type="text" size="3" style="height: 22px"></td>
        <td style="width: 102px"><input class='num' name="Text2" type="text" size="3"></td>
        <td style="width: 156px"><input class='num' name="Text3" type="text" size="3"></td>
        <td><input class='num' name="Text4" type="text" size="3"></td>
    </tr>
    <tr>
        <td style="width: 138px"><input class='num' name="Text5" type="text" size="3"></td>
        <td style="width: 102px"><input class='num' name="Text6" type="text" size="3"></td>
        <td style="width: 156px"><input class='num' name="Text7" type="text" size="3"></td>
        <td><input class='num' name="Text8" type="text" size="3"></td>
    </tr>
    <tr>
        <td style="width: 138px">
        <input class='num' name="Text9" type="text" style="height: 22px" size="3"></td>
        <td style="width: 102px"><input class='num' name="Text10" type="text" size="3"></td>
        <td style="width: 156px"><input class='num' name="Text11" type="text" size="3"></td>
        <td><input class='num' name="Text12" type="text" size="3"></td>
    </tr>
</table>
<form method='post' action=''>
<input class="num alignRight" type="text" />
</form>

JavaScript

jQuery(function($) {
    $('.num').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
    }).addTyping();
});