A jQueryplugin
that attaches a popup keyboard to a text field for mouse-driven entry or
adds an inline keypad in a division or span.
The current version is 2.1.1 and is available
under the MIT licence.
For more detail see the documentation reference page.
Or see a minimal page that you could
use as a basis for your own investigations.
The keypad functionality can easily be added to a text field with appropriate
default settings. Use it with a password field for more secure text entry.
You can also remove the keypad widget if it is no longer required.
Default keypad:
$('#defaultKeypad').keypad();
$('#viewKeypad').click(function() {
alert('The current value is: ' + $('#defaultKeypad').val());
});
$('#removeKeypad').click(function() {
var destroy = $(this).text() === 'Remove';
$(this).text(destroy ? 'Re-attach' : 'Remove');
$('#defaultKeypad').keypad(destroy ? 'destroy' : {});
});
The defaults are:
Text is in English
Numeric keys only are shown
Keys are not randomised
Keypad shows on focus and closes on external click
Only the keypad may be used for entry
You can override the defaults globally as shown below:
$.keypad.setDefaults({prompt: 'Please use the keypad'});
Processed fields are marked with a class of is-keypad
and are not re-processed if targeted a second time.
Invocation
You can trigger the keypad by focus on the field (the default),
via an associated button, or by both.
Disable or enable the fields and their triggers via a command.
You can also control the animation used to display the keypad and its duration.
There are three standard animations (show,
fadeIn, slideDown) as well as the ones from the
jQuery UI effects package.
Additional options for the latter may be specified with the
showOptions setting.
You can present the keypad inline by applying it to a div
or span. Make use of the value entered via the
onKeypress or onClose callbacks.
Or connect it with an external input field via the target setting.
Inline keypad:
$('#inlineKeypad').keypad({onClose: useValue, prompt: '',
closeText: 'Done', closeStatus: 'Use this value'});
function useValue(value) {
alert('The entered value is ' + value);
}
$('#inlineDisable').click(function() {
var enable = $(this).text() === 'Enable';
$(this).text(enable ? 'Disable' : 'Enable');
$('#inlineKeypad').keypad(enable ? 'enable' : 'disable');
});
With a textarea:
$('#inlineTextKeypad').keypad({onKeypress: appendValue, prompt: '',
layout: ['àáâãäåæçèéêë', 'ìííîïñòóôõöø',
'ðþùúûüýÿ' + $.keypad.ENTER + $.keypad.SHIFT]});
function appendValue(key) {
var field = $('#inlineText');
$.keypad.insertValue(field, key);
field.focus();
}
You can provide an extra level of security by randomising the
positions of the keys each time the keypad appears.
The keys are shuffled by type: alphabetic, numeric, and other.
You can define additional control keys to execute your own actions via the
addKeyDef function. Specify a variable name for including the key
in a layout, a name for styling and finding the display text, and the function
that implements the action.
Start/end keys:
.keypad-start, .keypad-end { background: #ff0; }
function moveCursor(input, pos) {
if (input[0].setSelectionRange) { // Mozilla
input[0].setSelectionRange(pos, pos);
}
else if (input[0].createTextRange) { // IE
var range = input[0].createTextRange();
range.move('character', pos);
range.select();
}
input.focus();
}
$.keypad.addKeyDef('START', 'start',
function(inst) { moveCursor(this, 0); });
$.keypad.addKeyDef('END', 'end',
function(inst) { moveCursor(this, this.val().length); });
$('#startEndKeypad').keypad({prompt: '', keypadOnly: false,
startText: '|<', startStatus: 'Move to start',
endText: '>|', endStatus: 'Move to end',
layout: ['789' + $.keypad.CLOSE,
'456' + $.keypad.CLEAR,
'123' + $.keypad.BACK,
'.0' + $.keypad.SPACE + $.keypad.START + $.keypad.END]});
Callback Events
Callbacks notify you when certain events occur within the keypad.
Of course, you can still have an onchange handler
for the input field itself.
You can localise the keypad for other languages.
Select a language to change the text and tooltips.
:
You need to load the appropriate language package (see list below), which
adds a language set ($.keypad.regionalOptions[langCode]) and automatically
sets this language as the default for all keypad fields.
You can control the appearance of the keypad via CSS and the
keypadClass option. The latter is set as a class value
for the keypad instance, allowing it to be individually customised.
The snippet below shows the structure of the keypad along with
the CSS classes you can target for customisation.
The ui-* classes are only present if useThemeRoller is true.
An online storyboard creator.
The keypad allows foreign characters to be easily added to the storyboard,
helping school students in language classes.
To add another example, please contact me (wood.keith{at}optusnet.com.au)
and provide the plugin name, the URL of your site, its title,
and a short description of its purpose and where/how the plugin is used.
Quick Reference
A full list of all possible settings is shown below.
Note that not all would apply in all cases. For more detail see the
documentation reference page.
$(selector).keypad({
buttonText: '...', // Display text for trigger button
buttonStatus: 'Open the keypad', // Status text for trigger button
closeText: 'Close', // Display text for close link
closeStatus: 'Close the panel', // Status text for close link
clearText: 'Clear', // Display text for clear link
clearStatus: 'Erase the current entry', // Status text for clear link
backText: 'Back', // Display text for back link
backStatus: 'Erase the previous character', // Status text for back link
spacebarText: ' ', // Display text for space bar
spacebarStatus: 'Space', // Status text for space bar
enterText: 'Enter', // Display text for carriage return
enterStatus: 'Carriage return', // Status text for carriage return
tabText: '→', // Display text for tab
tabStatus: 'Horizontal tab', // Status text for tab
shiftText: 'Shift', // Display text for shift link
shiftStatus: 'Toggle upper/lower case characters', // Status text for shift link
alphabeticLayout: this.qwertyAlphabetic, // Default layout for alphabetic characters
fullLayout: this.qwertyLayout, // Default layout for full keyboard
isAlphabetic: this.isAlphabetic, // Function to determine if character is alphabetic
isNumeric: this.isNumeric, // Function to determine if character is numeric
toUpper: this.toUpper, // Function to convert characters to upper case
isRTL: false, // True if right-to-left language, false if left-to-right
showOn: 'focus', // 'focus' for popup on focus,
// 'button' for trigger button, or 'both' for either
buttonImage: '', // URL for trigger button image
buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
showAnim: 'show', // Name of jQuery animation for popup
showOptions: {}, // Options for enhanced animations
duration: 'normal', // Duration of display/closure
appendText: '', // Display text following the input box, e.g. showing the format
useThemeRoller: false, // True to add ThemeRoller classes
keypadClass: '', // Additional CSS class for the keypad for an instance
prompt: '', // Display text at the top of the keypad
layout: ['123' + this.CLOSE, '456' + this.CLEAR,
'789' + this.BACK, this.SPACE + '0'], // Layout of keys
separator: '', // Separator character between keys
target: null, // Input target for an inline keypad
keypadOnly: true, // True for entry only via the keypad, false for keyboard too
randomiseAlphabetic: false, // True to randomise the alphabetic key positions, false to keep in order
randomiseNumeric: false, // True to randomise the numeric key positions, false to keep in order
randomiseOther: false, // True to randomise the other key positions, false to keep in order
randomiseAll: false, // True to randomise all key positions, false to keep in order
beforeShow: null, // Callback before showing the keypad
onKeypress: null, // Define a callback function when a key is selected
onClose: null // Define a callback function when the panel is closed
});
$.keypad.regionalOptions[] // Language/country-specific localisations
$.keypad.CLOSE // Key marker for close button
$.keypad.CLEAR // Key marker for clear button
$.keypad.BACK // Key marker for back button
$.keypad.SHIFT // Key marker for shift button
$.keypad.SPACE_BAR // Key marker for space bar button
$.keypad.ENTER // Key marker for enter button
$.keypad.SPACE // Key marker for an empty space
$.keypad.HALF_SPACE // Key marker for an empty half space
$.keypad.numericLayout // Standard numeric layout
$.keypad.qwertyAlphabetic // Standard US keyboard alphabetic layout
$.keypad.qwertyLayout // Standard US keyboard layout
$.keypad.setDefaults(settings) // Set global defaults
$.keypad.addKeyDef(id, name, action, noHighlight) // Define an action key
$.keypad.isAlphabetic(ch) // Test for an alphabetic character
$.keypad.isNumeric(ch) // Test for a numeric character
$.keypad.toUpper(ch) // Convert character to upper case
$.keypad.insertValue(input, value) // Insert text into an input field
$(selector).keypad('option', settings) // Change instance settings
$(selector).keypad('option', name, value) // Change an instance setting
$(selector).keypad('option', name) // Retrieve an instance setting
$(selector).keypad('destroy') // Remove keypad functionality
$(selector).keypad('show') // Show the keypad
$(selector).keypad('hide') // Hide the keypad
$(selector).keypad('enable') // Enable the keypad
$(selector).keypad('disable') // Disable the keypad
$(selector).keypad('isDisabled') // Is the keypad disabled?
Usage
Include the jQuery library (1.7+) in the head section of your page.
Localisation packages are available for download
and should be loaded after the main keypad code. These packages
automatically apply their settings as global default values.
NetFacturação - Software