kabachello / jquery.numpad

Touch-optimized numeric on-screen keypad for jQuery

jQuery.NumPad

Flexible touch-optimized numeric keypad for web applications based on jQuery. One of the best things about jQuery.NumPad is that it can easily fit into most UI frameworks using jQuery by merely setting a few templates! The numeric keypad can be used to fill inputs, password fields, general div-elements or entire table columns.

Demos

• With jQuery mobile: http://a.kabachnik.info/numeric-keypad-for-jquerymobile.html
• With Bootstrap: http://a.kabachnik.info/jquery-numpad.html
• Stand alone: coming soon!

Documentation

http://a.kabachnik.info/jquery-numpad.html

Quick start

1. Include the plugin and the CSS in your header

<link rel="stylesheet" href="path_to_numpad_folder/jquery.numpad.css">
<script type="text/javascript" src="path_to_numpad_folder/jquery.numpad.js"></script>

2. Initialize numpads for every element you want to toggle a numeric keypad

function($){
	$('selector1').numpad();
}

TODOs & Known bugs

• Fix conflicts with the locale based number formatting on input fields with type="number".
• Add position options to place the keypad above or aside the target element
• Make a simple calculator

License

jQuery.NumPad is an open source project by Andrej Kabachnik, that is licensed under MIT. If you like the plugin an wish to support further development, you can show your appriciation by a donation. Even small donations are a great support!

jquery.numpad's Issues

nmpd.display.attr('maxLength') undefined

I'm trying to adjust some of the code, but start noticing some bugs.
After adding some breakpoints, I noticed that attr receives two inputs, not one.

nmpd.display.attr('maxLength')
undefined 

The result is always undefined.

Comma ?

Good work, but comma clears instead of adding decimals

Numpad size option

A suggestion.
It would be great if there is a size option. The default size is too small for this numpad to be used on a 12 inch tablet.

Physical keys blocked by jQuery.NumPad

@kabachello :

Judging from your demos:

http://a.kabachnik.info/numeric-keypad-for-jquerymobile.html
http://a.kabachnik.info/jquery-numpad.html

it looks like the physical keys of a physical keyboard do no longer work once the jQuery.NumPad has popped up. It seems to block phsysical keyboard input.

Why can't the jQuery.NumPad be used simultaneously with a physical keyboard?

Regards

How to get the caller object?

Is it somehow possible to access the caller object (especially attributes or parent attributes) within e.g. the onKeypadOpen: function () {

Fork with RPN calculator

Thanks for making jQuery.NumPad. FYI, I forked it and added a rudimentary RPN calculator with a few functions - https://github.com/MitchBradley/jQuery.NumPad .

I hesitate to issue a pull request because

• I haven't added hooks for internationalizing the new button names
• Most people would probably prefer an infix calculator

But perhaps some people might find it useful.

Documentation site is down

Uh oh, did you forget to renew your domain?
http://a.kabachnik.info/

No CSS showing

I've got it to where the input pops up, but there is no css showing.

<link href="./assets/css/jquery.numpad.css" rel="stylesheet">
<script src="./assets/js/jquery.numpad.js"></script>

<input type="text" id="userID" name="userID" class="form-control nmpd-target"/>

        <script type="text/javascript">
            // Initialize the numpad
            $('#userID').numpad();
        </script>

http://prntscr.com/clw60x

Multiple Instances

I have a tab page, and when switching between pages I get an additional numpad instance. For example, when I switch between tab1 and tab2, I will get three instances. I go to tab3 and then back to tab1, I will have two more for a total of 4 instances. I am not sure where I am going wrong.

<title>Aircraft W&B</title>

	<link rel="stylesheet" href="_plugins/aramco.css">
	<link rel="stylesheet" href="_plugins/jquery.mobile-1.4.5.min.css">

	<script src="_plugins/index.js"></script>
	<script src="_plugins/jquery.js"></script>
	<script src="_plugins/jquery.mobile-1.4.5.min.js"></script>	
			
	<!--NumPad.........................................................................................	-->		
	<!--...............................................................................................	-->
	<link rel="stylesheet" href="_plugins/jquery.numpad.css">
	<script src="_plugins/jquery.numpad.js"></script>
	<script type="text/javascript">
		// Set NumPad defaults for jQuery mobile. 
		// These defaults will be applied to all NumPads within this document!
		$.fn.numpad.defaults.gridTpl = '<table class="ui-bar-a"></table>';
		$.fn.numpad.defaults.backgroundTpl = '<div class="ui-popup-screen ui-overlay-a"></div>';
		$.fn.numpad.defaults.displayTpl = '<input data-theme="a" type="text" />';
		$.fn.numpad.defaults.buttonNumberTpl =  '<a data-role="button" data-theme="a"></a>';
		$.fn.numpad.defaults.buttonFunctionTpl = '<a data-role="button" data-theme="a"></a>';
		$.fn.numpad.defaults.onKeypadCreate = function(){$(this).enhanceWithin();};
	
		// Instantiate NumPad once the page is ready to be shown
		$(document).on('pageshow', function(){
			$('#p1w').numpad();
			$('#p2w').numpad();
			$('#f1w').numpad();
			$('#f2w').numpad();
			$('#f3w').numpad();
			$('#m1w').numpad();
			$('#m3w').numpad();
			$('#r1w').numpad();
			$('#r2w').numpad();
			$('#r3w').numpad();
			$('#bag1w').numpad();
			$('#fuel1w').numpad();				
		});
	</script>
	<style type="text/css">
		.controlgroup-textinput{
			padding-top: .22em;
			padding-bottom: .22em;
		}
	</style>

</head>
<body>

	<div data-role="page" data-theme="b" id="one">
		<form method="post" action="" id="form1" name="form" target="hiddeniFrame">
			<div data-role="header">
				<div class="ui-grid-a ui-responsive" style="margin-left:2px; margin-right:5px">
					<div class="ui-block-a" style="width:60%">
						<div class="ui-body ui-body-f">
							<h3>
								SAUDI ARAMCO AVIATION DEPARTMENT<br />H145
							</h3>
							<b><small><script type="text/javascript"><!--
								document.write(dept + ' : ' + formname + ' : ' + wbdate); //--></script>
								</small></b>
						</div>
					</div>
					<div class="ui-block-b" style="width:40%">
						<div class="ui-body ui-body-f">
							<div data-controltype="image" >
								<img align="right" style="width: 270px; height: 70px;" src="_plugins/images/logo.png" alt="logo" />
							</div>
						</div>
					</div>
				</div>
			</div><!-- /header -->
			<div role="main" class="ui-content">
				<table style="width: 100%;" border="0" cellpadding="0">
					<tbody>
						<tr>
							<td align="center"><select name="aircraftList" id="aircraftList" data-mini="true"></select></td>
							<td>&nbsp;</td>
							<td align="center"><select name="configList" id="configList" data-mini="true"></select></td>
						</tr>
					</tbody>
				</table>
				<hr style="border: 0px; border-image: none; height: 2px; margin-top: 4px; margin-bottom: 4px; background-color: #D3D3D3;"/>
				<table style="width: 100%;" border="0" cellpadding="0">
					<tbody>
						<tr>
							<td align="center" width="14.32%">&nbsp;</td>
							<td align="center" width="14.28%">&nbsp;</td>
							<td align="center" width="14.28%">&nbsp;</td>
							<td align="center" width="14.28%">&nbsp;</td>
							<td align="center" width="14.28%">&nbsp;</td>
							<td align="center" width="14.28%">&nbsp;</td>
							<td align="center" width="14.28%">&nbsp;</td>
						</tr>
						<tr>
							<td align="left" valign="middle" colspan="2">Cockpit</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="p1w" style="text-align:center;" id="p1w" value="0">
							</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="p2w" style="text-align:center;" id="p2w" value="0">
							</td>
							<td align="center"></td>
						</tr>
						<tr>
							<td align="left" valign="middle" >Row 1</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="f1w" style="text-align:center;" id="f1w" value="0">
							</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="f2w" style="text-align:center;" id="f2w" value="0">
							</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="f3w" style="text-align:center;" id="f3w" value="0">
							</td>
						</tr>
						<tr>
							<td align="left" valign="middle" >Row 2</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="m1w" style="text-align:center;" id="m1w" value="0">
							</td>
							<td colspan="2">&nbsp;</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="m3w" style="text-align:center;" id="m3w" value="0">
							</td>
						</tr>
						<tr>
							<td align="left" valign="middle" >Row 3</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="r1w" style="text-align:center;" id="r1w" value="0">
							</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="r2w" style="text-align:center;" id="r2w" value="0">
							</td>
							<td align="center" colspan="2" style="position:relative;">
								<IMG SRC="_plugins/images/seat.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="r3w" style="text-align:center;" id="r3w" value="0">
							</td>
						</tr>
						<tr>
							<td align="left" valign="middle" colspan="3">Baggage</td>
							<td align="center" colspan="2">
								<IMG SRC="_plugins/images/baggage.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="bag1w" style="text-align:center;" id="bag1w" value="0">
							</td>
							<td align="center" colspan="2">&nbsp;</td>
						</tr>
						<tr>
							<td align="left" valign="middle" colspan="3">Fuel</td>
							<td align="center" colspan="2">
								<IMG SRC="_plugins/images/fuel.png" style="margin:auto; width:50px;display:block" />
								<input type="text" name="fuel1w" style="text-align:center;" id="fuel1w" value="0">
							</td>
							<td align="center" colspan="2">&nbsp;</td>
						</tr>
					</tbody>
				</table>
			</div><!-- /content -->
			<div data-role="footer" data-position="fixed">
				<div  style="font-size:x-small">
					Calculated <b>Gross Weight</b> and <b>C.G.</b> must lie within the utility or normal category envelope limits per the <i>Rotorcraft Flight Manual and applicable Appendixes. Information provided by this calculator is intended for reference only. The PIC is responsible to ensure correct data, proper loading and that the aircraft is being operated within C.G. limitations in accordance with the aircraft manufacturer's limitations.</i>
				</div>
				<div data-role="navbar">
					<ul>
						<li><a href="#one">Data<br />Input</a></li>
						<li><a href="#two">Longitudinal<br />CG Chart</a></li>
						<li><a href="#three">Lateral<br />CG Chart</a></li>
						<li><a href="#four">Long<br />Calculation</a></li>
					</ul>
				</div><!-- /navbar -->
			</div><!-- /footer -->
		</form>
	</div><!-- /page one -->

	<div data-role="page" data-theme="b" id="two">
		<form method="post" action="" id="form1" name="form" target="hiddeniFrame">
			<div data-role="header">
				<div class="ui-grid-a ui-responsive" style="margin-left:2px; margin-right:5px">
					<div class="ui-block-a" style="width:60%">
						<div class="ui-body ui-body-f">
							<h3>
								SAUDI ARAMCO AVIATION DEPARTMENT<br />H145
							</h3>
							<b><small><script type="text/javascript"><!--
								document.write(dept + ' : ' + formname + ' : ' + wbdate); //--></script>
								</small></b>
						</div>
					</div>
					<div class="ui-block-b" style="width:40%">
						<div class="ui-body ui-body-f">
							<div data-controltype="image" >
								<img align="right" style="width: 270px; height: 70px;" src="_plugins/images/logo.png" alt="logo" />
							</div>
						</div>
					</div>
				</div>
			</div><!-- /header -->
			<div role="main" class="ui-content">
				<IMG SRC="_plugins/images/h145_long_graph.png" style="margin:auto; width:746px;display:block" />

			</div><!-- /content -->
			<div data-role="footer" data-position="fixed">
				<div  style="font-size:x-small">
					Calculated <b>Gross Weight</b> and <b>C.G.</b> must lie within the utility or normal category envelope limits per the <i>Rotorcraft Flight Manual and applicable Appendixes. Information provided by this calculator is intended for reference only. The PIC is responsible to ensure correct data, proper loading and that the aircraft is being operated within C.G. limitations in accordance with the aircraft manufacturer's limitations.</i>
				</div>
				<div data-role="navbar">
					<ul>
						<li><a href="#one">Data<br />Input</a></li>
						<li><a href="#two">Longitudinal<br />CG Chart</a></li>
						<li><a href="#three">Lateral<br />CG Chart</a></li>
						<li><a href="#four">Long<br />Calculation</a></li>
					</ul>
				</div><!-- /navbar -->
			</div><!-- /footer -->
		</form>
	</div><!-- /page two -->

	<div data-role="page" data-theme="b" id="three">
		<form method="post" action="" id="form1" name="form" target="hiddeniFrame">
			<div data-role="header">
				<div class="ui-grid-a ui-responsive" style="margin-left:2px; margin-right:5px">
					<div class="ui-block-a" style="width:60%">
						<div class="ui-body ui-body-f">
							<h3>
								SAUDI ARAMCO AVIATION DEPARTMENT<br />H145
							</h3>
							<b><small><script type="text/javascript"><!--
								document.write(dept + ' : ' + formname + ' : ' + wbdate); //--></script>
								</small></b>
						</div>
					</div>
					<div class="ui-block-b" style="width:40%">
						<div class="ui-body ui-body-f">
							<div data-controltype="image" >
								<img align="right" style="width: 270px; height: 70px;" src="_plugins/images/logo.png" alt="logo" />
							</div>
						</div>
					</div>
				</div>
			</div><!-- /header -->
			<div role="main" class="ui-content">
				<IMG SRC="_plugins/images/h145_lat_graph.png" style="margin:auto; width:373px;display:block" />

			</div><!-- /content -->
			<div data-role="footer"data-position="fixed">
				<div  style="font-size:x-small">
					Calculated <b>Gross Weight</b> and <b>C.G.</b> must lie within the utility or normal category envelope limits per the <i>Rotorcraft Flight Manual and applicable Appendixes. Information provided by this calculator is intended for reference only. The PIC is responsible to ensure correct data, proper loading and that the aircraft is being operated within C.G. limitations in accordance with the aircraft manufacturer's limitations.</i>
				</div>
				<div data-role="navbar">
					<ul>
						<li><a href="#one">Data<br />Input</a></li>
						<li><a href="#two">Longitudinal<br />CG Chart</a></li>
						<li><a href="#three">Lateral<br />CG Chart</a></li>
						<li><a href="#four">Long<br />Calculation</a></li>
					</ul>
				</div><!-- /navbar -->
			</div><!-- /footer -->
		</form>
	</div><!-- /page three -->

	<div data-role="page" data-theme="b" id="four">
		<form method="post" action="" id="form1" name="form" target="hiddeniFrame">
			<div data-role="header">
				<div class="ui-grid-a ui-responsive" style="margin-left:2px; margin-right:5px">
					<div class="ui-block-a" style="width:60%">
						<div class="ui-body ui-body-f">
							<h3>
								SAUDI ARAMCO AVIATION DEPARTMENT<br />H145
							</h3>
							<b><small><script type="text/javascript"><!--
								document.write(dept + ' : ' + formname + ' : ' + wbdate); //--></script>
								</small></b>
						</div>
					</div>
					<div class="ui-block-b" style="width:40%">
						<div class="ui-body ui-body-f">
							<div data-controltype="image" >
								<img align="right" style="width: 270px; height: 70px;" src="_plugins/images/logo.png" alt="logo" />
							</div>
						</div>
					</div>
				</div>
			</div><!-- /header -->
			<div role="main" class="ui-content">
				<table style="width: 100%;" border="0" cellpadding="0">
					<tbody>
						<tr>
							<td colspan="3">&nbsp;</td>
							<td colspan="2" align="center"><b>LONGITUDINAL</b></td>
							<td colspan="2" align="center"><b>LATERAL</b></td>
						</tr>
						<tr>
							<td colspan="2">&nbsp;</td>
							<td align="center"><b>Mass<br />(KG)</b></td>
							<td align="center"><b>X-STA<br />(mm)</b></td>
							<td align="center"><b>Mass-moment<br />(kgmm)</b></td>
							<td align="center"><b>Y-BL<br />(mm)</b></td>
							<td align="center"><b>Mass-moment<br />(kgmm)</b></td>
						</tr>
						<tr>
							<td colspan="8"><b>Aircraft</b></td>
						</tr>
						<tr>
							<td colspan="2"><b>8 PAX STANDARD SEAT OFFSHORE</b></td>
							<td align="right">2533</td>
							<td align="center">4701.23</td>
							<td align="right">11908228</td>
							<td align="right">4.26</td>
							<td align="right">10793</td>
						</tr>
						<tr>
							<td colspan="8"><b>C.G. of Pilot and Copilot</b></td>
						</tr>
						<tr>
							<td><b>P</b></td>
							<td>Pilot</td>
							<td align="right">80</td>
							<td rowspan=2 align="center">2312</td>
							<td align="right">184960</td>
							<td align="right">390.00</td>
							<td align="right">31200</td>
						</tr>
						<tr>
							<td><b>C</b></td>
							<td>Copilot</td>
							<td align="right">80</td>
							<td align="right">184960</td>
							<td align="right">-390.00</td>
							<td align="right">-31200</td>
						</tr>
						<tr>
							<td colspan="8">C.G. of Passengers</td>
						</tr>
						<tr>
							<td><b>1</b></td>
							<td rowspan=3 >Against Flight Direction - Seat Reference Point High</td>
							<td align="right">80</td>
							<td rowspan=3  align="center">3366</td>
							<td align="right">269280</td>
							<td align="right">550.00</td>
							<td align="right">44000</td>
						</tr>
						<tr>
							<td><b>2</b></td>
							<td align="right">80</td>
							<td align="right">269280</td>
							<td align="right">0</td>
							<td align="right">0</td>
						</tr>
						<tr>
							<td><b>3</b></td>
							<td align="right">80</td>
							<td align="right">269280</td>
							<td align="right">-550.00</td>
							<td align="right">-44000</td>
						</tr>
						<tr>
							<td><b>4</b></td>
							<td rowspan=3 >In Flight Direction - Seat Reference Point High</td>
							<td align="right">80</td>
							<td rowspan=3 align="center">4193</td>
							<td align="right">335440</td>
							<td align="right">480.00</td>
							<td align="right">38400</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td><b>5</b></td>
							<td align="right">80</td>
							<td align="right">335440</td>
							<td align="right">-480.00</td>
							<td align="right">-38400</td>
						</tr>
						<tr>
							<td><b>6</b></td>
							<td rowspan=3 >In Flight Direction - Seat Reference Point Low</td>
							<td align="right">80</td>
							<td rowspan=3 align="center">5057</td>
							<td align="right">404560</td>
							<td align="right">460.00</td>
							<td align="right">36800</td>
						</tr>
						<tr>
							<td><b>7</b></td>
							<td align="right">80</td>
							<td align="right">404560</td>
							<td align="right">0</td>
							<td align="right">0</td>
						</tr>
						<tr>
							<td><b>8</b></td>
							<td align="right">80</td>
							<td align="right">404560</td>
							<td align="right">-460.00</td>
							<td align="right">-36800</td>
						</tr>
						<tr>
							<td colspan="2"><b>Baggage</b></td>
							<td align="right">70</td>
							<td align="center">5500.00</td>
							<td align="right">385000</td>
							<td align="right">0</td>
							<td align="right">0</td>
						</tr>
						<tr>
							<td colspan="2"><b>Total with 0kg 	(Empty) Fuel</b></td>
							<td align="right">0</td>
							<td align="center">4512.36</td>
							<td align="right">15355548</td>
							<td align="right">0</td>
							<td align="right">0</td>
						</tr>
						<tr>
							<td colspan="2"><b>Total with 700kg (Take-off) Fuel</b></td>
							<td align="right">700</td>
							<td align="center">4487.56</td>
							<td align="right">18412448</td>
							<td align="right">2.29</td>
							<td align="right">9393</td>
						</tr>
					</tbody>
				</table>
			</div><!-- /content -->
			<div data-role="footer" data-position="fixed">
				<div  style="font-size:x-small">
					Calculated <b>Gross Weight</b> and <b>C.G.</b> must lie within the utility or normal category envelope limits per the <i>Rotorcraft Flight Manual and applicable Appendixes. Information provided by this calculator is intended for reference only. The PIC is responsible to ensure correct data, proper loading and that the aircraft is being operated within C.G. limitations in accordance with the aircraft manufacturer's limitations.</i>
				</div>
				<div data-role="navbar">
					<ul>
						<li><a href="#one">Data<br />Input</a></li>
						<li><a href="#two">Longitudinal<br />CG Chart</a></li>
						<li><a href="#three">Lateral<br />CG Chart</a></li>
						<li><a href="#four">Long<br />Calculation</a></li>
					</ul>
				</div><!-- /navbar -->
			</div><!-- /footer -->
		</form>
	</div><!-- /page four -->
</body>