bobboteck / easy-numpad

No-jQuery based soft number pad which is developed use and customize easily

Easy Numpad

Easy Numpad is a pure HTML+JS+CSS control to implement a Numeric Pad in your HTML page, to be associated in a very simple way with any text field.

Based on a Fork from an original project by Gayan Sandamal.

I'm modifying the code to use only Javascript without external frameworks (no JQuery required), in order to improve compatibility with all browsers and improve performance.

Try it

You can see a live example of use in this page.

How to use in your page

Simple add this code where you need, every time you need in your HTML page:

<input id="yourElementId" type="number" readonly="true" onclick="show_easy_numpad(this);" />

you need only to replace "yourElementId" with the specific ID of your control.

If you need to set a default value, just value the "value" property of the element, as shown in the following example where 125 is the default value:

<input id="yourElementId" type="number" value="125" readonly="true" onclick="show_easy_numpad(this);" />

Now you can set a range of value with standard min and max attribute of tag as show in the following example:

<input id="yourElementId" type="number" min="-12.5" max="30" readonly="true" onclick="show_easy_numpad(this);" />

When you open the numpad if you not need to have the value present in the field already set, you can use the custom attribute "data-easynumpad-use_default" setting it to "false". Setting the value to "true", or not entering the attribute (for reasons of backward compatibility) the value is reported in the numpad. Below is an example of use:

<input id="yourElementId" type="number" data-easynumpad-use_default="false" readonly="true" onclick="show_easy_numpad(this);" />

Added a new feature

A list of new features implemented respect to the original:

• When selecting an input field already valued, the value is also shown in the easy-numpad that opens
• Added a "±" button to type negative numbers, and now only a "-" sign can be inserted in the head of number
• Enter the "0" automatically if the "." is pressed first
• Enter the "." automatically if the "0" is pressed first
• Validation of the number entered implicit validation with the controls made on the insertion
• Manage the insertion of an excessive number of characters
• Manage min and max range with standard attribute of tag
• Attribute to define if fetch or not the value of the field in the numpad

Next feature

List of planned new features (more info at Project page):

• ...

Request feature o bug fixing

If you need an unexpected functionality or if you want to report a bug, open an Issue indicating your request.