I am a little confused about this plugin. Is there a way to insert the numbers directly in my text-basic input instead of to press "Done" in keypad? I'd like that as I type the numbers in keypad they be shown automatically in text-basic input (because until now it's necessary to preview in keypad input and to press enter to make they be shown).
Here is the code:
/**
* jQuery.NumPad
*
* Copyright (c) 2015 Andrej Kabachnik
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* https://github.com/kabachello/jQuery.NumPad
*
* Version: 1.4
*
*/
(function($){
// From https://stackoverflow.com/questions/4963053/focus-to-input-without-scrolling
var cursorFocus = function(elem) {
var x = window.scrollX, y = window.scrollY;
elem.focus();
window.scrollTo(x, y);
}
$.fn.numpad=function(options){
if (typeof options == 'string'){
var nmpd = $.data(this[0], 'numpad');
if (!nmpd) throw "Cannot perform '" + options + "' on a numpad prior to initialization!";
switch (options){
case 'open':
nmpd.open(nmpd.options.target ? nmpd.options.target : this.first());
break;
case 'close':
nmpd.open(nmpd.options.target ? nmpd.options.target : this.first());
break;
}
return this;
}
// Apply the specified options overriding the defaults
options = $.extend({}, $.fn.numpad.defaults, options);
// Create a numpad. One for all elements in this jQuery selector.
// Since numpad() can be called on multiple elements on one page, each call will create a unique numpad id.
var id = 'nmpd' + ($('.nmpd-wrapper').length + 1);
var nmpd = {};
return this.each(function(){
// If an element with the generated unique numpad id exists, the numpad had been instantiated already.
// Otherwise create a new one!
if ($('#'+id).length == 0) {
/** @var nmpd jQuery object containing the entire numpad */
nmpd = $('<div id="' + id + '"></div>').addClass('nmpd-wrapper');
nmpd.options = options;
/** @var display jQuery object representing the display of the numpad (typically an input field) */
var display = $(options.displayTpl).addClass('nmpd-display');
nmpd.display = display;
/** @var grid jQuery object containing the grid for the numpad: the display, the buttons, etc. */
var table = $(options.gridTpl).addClass('nmpd-grid');
nmpd.grid = table;
table.append($(options.rowTpl).append($(options.displayCellTpl).append(display).append($('<input type="hidden" class="dirty" value="0"></input>'))));
// Create rows and columns of the the grid with appropriate buttons
table.append(
$(options.rowTpl)
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(7).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(8).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(9).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textDelete).addClass('del').click(function(){
nmpd.setValue(nmpd.getValue().toString().substring(0,nmpd.getValue().toString().length - 1));
})))
).append(
$(options.rowTpl)
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(4).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(5).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(6).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textClear).addClass('clear').click(function(){
nmpd.setValue('');
})))
).append(
$(options.rowTpl)
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(1).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(2).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(3).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textCancel).addClass('cancel').click(function(){
nmpd.close(false);
})))
).append(
$(options.rowTpl)
.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('±').addClass('neg').click(function(){
nmpd.setValue(nmpd.getValue() * (-1));
})))
.append($(options.cellTpl).append($(options.buttonNumberTpl).html(0).addClass('numero')))
.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.decimalSeparator).addClass('sep').click(function(){
nmpd.setValue(nmpd.getValue().toString() + options.decimalSeparator);
})))
.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textDone).addClass('done')))
);
// Create the backdrop of the numpad - an overlay for the main page
nmpd.append($(options.backgroundTpl).addClass('nmpd-overlay').click(function(){nmpd.close(false);}));
// Append the grid table to the nmpd element
nmpd.append(table);
// Hide buttons to be hidden
if (options.hidePlusMinusButton){
nmpd.find('.neg').hide();
}
if (options.hideDecimalButton){
nmpd.find('.sep').hide();
}
// Attach events
if (options.onKeypadCreate){
nmpd.on('numpad.create', options.onKeypadCreate);
}
if (options.onKeypadOpen){
nmpd.on('numpad.open', options.onKeypadOpen);
}
if (options.onKeypadClose){
nmpd.on('numpad.close', options.onKeypadClose);
}
if (options.onChange){
nmpd.on('numpad.change', options.onChange);
}
(options.appendKeypadTo ? options.appendKeypadTo : $(document.body)).append(nmpd);
// Special event for the numeric buttons
$('#'+id+' .numero').bind('click', function(){
var val;
if ($('#'+id+' .dirty').val() == '0'){
val = $(this).text();
} else {
val = nmpd.getValue() ? nmpd.getValue().toString() + $(this).text() : $(this).text();
}
nmpd.setValue(val);
});
// Finally, once the numpad is completely instantiated, trigger numpad.create
nmpd.trigger('numpad.create');
} else {
// If the numpad was already instantiated previously, just load it into the nmpd variable
//nmpd = $('#'+id);
//nmpd.display = $('#'+id+' input.nmpd-display');
}
$.data(this, 'numpad', nmpd);
// Make the target element readonly and save the numpad id in the data-numpad property. Also add the special nmpd-target CSS class.
$(this).attr("readonly", true).attr('data-numpad', id).addClass('nmpd-target');
// Register a listener to open the numpad on the event specified in the options
$(this).bind(options.openOnEvent,function(){
nmpd.open(options.target ? options.target : $(this));
});
// Define helper functions
/**
* Gets the current value displayed in the numpad
* @return string | number
*/
nmpd.getValue = function(){
return isNaN(nmpd.display.val()) ? 0 : nmpd.display.val();
};
/**
* Sets the display value of the numpad
* @param string value
* @return jQuery object nmpd
*/
nmpd.setValue = function(value){
if (nmpd.display.attr('maxLength') < value.toString().length) value = value.toString().substr(0, nmpd.display.attr('maxLength'));
nmpd.display.val(value);
nmpd.find('.dirty').val('1');
nmpd.trigger('numpad.change', [value]);
return nmpd;
};
/**
* Closes the numpad writing it's value to the given target element
* @param jQuery object target
* @return jQuery object nmpd
*/
nmpd.close = function(target){
// If a target element is given, set it's value to the dipslay value of the numpad. Otherwise just hide the numpad
if (target){
if (target.prop("tagName") == 'INPUT'){
target.val(nmpd.getValue().toString().replace('.', options.decimalSeparator));
} else {
target.html(nmpd.getValue().toString().replace('.', options.decimalSeparator));
}
}
// Hide the numpad and trigger numpad.close
nmpd.hide();
nmpd.trigger('numpad.close');
// Trigger a change event on the target element if the value has really been changed
// TODO check if the value has really been changed!
if (target && target.prop("tagName") == 'INPUT'){
target.trigger('change');
}
return nmpd;
};
/**
* Opens the numpad for a given target element optionally filling it with a given value
* @param jQuery object target
* @param string initialValue
* @return jQuery object nmpd
*/
nmpd.open = function(target, initialValue){
// Set the initial value
// Use nmpd.display.val to avoid triggering numpad.change for the initial value
if (initialValue){
nmpd.display.val(initialValue);
} else {
if (target.prop("tagName") == 'INPUT'){
nmpd.display.val(target.val());
nmpd.display.attr('maxLength', target.attr('maxLength'));
} else {
nmpd.display.val(parseFloat(target.text()));
}
}
// Mark the numpad as not dirty initially
$('#'+id+' .dirty').val(0);
// Show the numpad and position it on the page
cursorFocus(nmpd.show().find('.cancel'));
position(nmpd.find('.nmpd-grid'), options.position, options.positionX, options.positionY);
// Register a click handler on the done button to update the target element
// Make sure all other click handlers get removed. Otherwise some unwanted sideeffects may occur if the numpad is
// opened multiple times for some reason
$('#'+id+' .done').off('click');
$('#'+id+' .done').one('click', function(){ nmpd.close(target); });
// Finally trigger numpad.open
nmpd.trigger('numpad.open');
return nmpd;
};
});
};
/**
* Positions any given jQuery element within the page
*/
function position(element, mode, posX, posY) {
var x = 0;
var y = 0;
if (mode == 'fixed'){
element.css('position','fixed');
if (posX == 'left'){
x = 0;
} else if (posX == 'right'){
x = $(window).width() - element.outerWidth();
} else if (posX == 'center'){
x = ($(window).width() / 2) - (element.outerWidth() / 2);
} else if ($.type(posX) == 'number'){
x = posX;
}
element.css('left', x);
if (posY == 'top'){
y = 0;
} else if (posY == 'bottom'){
y = $(window).height() - element.outerHeight();
} else if (posY == 'middle'){
y = ($(window).height() / 2) - (element.outerHeight() / 2);
} else if ($.type(posY) == 'number'){
y = posY;
}
element.css('top', y);
}
return element;
}
// Default values for numpad options
$.fn.numpad.defaults = {
target: false,
openOnEvent: 'click',
backgroundTpl: '<div></div>',
gridTpl: '<table></table>',
displayTpl: '<input type="text" />',
displayCellTpl: '<td colspan="4"></td>',
rowTpl: '<tr></tr>',
cellTpl: '<td></td>',
buttonNumberTpl: '<button></button>',
buttonFunctionTpl: '<button></button>',
gridTableClass: '',
hidePlusMinusButton: false,
hideDecimalButton: false,
textDone: 'Done',
textDelete: 'Del',
textClear: 'Clear',
textCancel: 'Cancel',
decimalSeparator: ',',
precision: null,
appendKeypadTo: false,
position: 'fixed',
positionX: 'center',
positionY: 'middle',
onKeypadCreate: false,
onKeypadOpen: false,
onKeypadClose: false,
onChange: false
};
})(jQuery);
$('#text-basic').numpad();.nmpd-wrapper {display: none;}
.nmpd-target {cursor: pointer;}
.nmpd-grid {position:absolute; left:50px; top:50px; z-index:5000; -khtml-user-select: none; border-radius:10px; padding:10px; width: initial;}
.nmpd-overlay {z-index:4999;}
input.nmpd-display {text-align: right;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="text-basic" placeholder="Click to show numpad">[ UPDATE ]
You just need to add this option to the initialization. No need to edit the plugin code:
$('#text-basic').numpad({
onChange: (e,value)=>$("#text-basic").val( value )
});