Module: Keypad

Create the keypad plugin.

Sets an input field to popup a keypad for keystroke entry, or creates an inline keypad in a div or span.

Expects HTML like:

<input type="text"> or
<div></div>

Provide inline configuration like:

<input type="text" data-keypad="name: 'value'"/>

See the full documentation.

Source:
Example
$(selector).keypad()

Extends

  • JQPlugin

Members

(static) numericLayout

Number keypad only. For use with the layout option.
Source:
Example
layout: $.keypad.numericLayout

(static) qwertyAlphabetic

Standard US keyboard alphabetic layout. For use with the layout option.
Source:
Example
layout: $.keypad.qwertyAlphabetic

(static) qwertyLayout

Full Qwerty keyboard - standard US. For use with the layout option.
Source:
Example
layout: $.keypad.qwertyLayout

(inner) deepMerge

Don't deep merge options - causes problems with arrays.
Default Value:
  • false
Source:

(inner) defaultOptions

Default settings for the plugin.
Properties:
Name Type Attributes Default Description
showOn string <optional>
'focus' 'focus' for popup on focus, 'button' for trigger button, or 'both' for either.
buttonImage string <optional>
'' URL for trigger button image.
buttonImageOnly boolean <optional>
false true if the image appears alone, false if it appears on a button.
showAnim string <optional>
'show' Name of jQuery animation for popup.
showOptions object <optional>
null Options for enhanced animations.
duration string | number <optional>
'normal' Duration of display/closure as a named speed or in milliseconds.
appendText string <optional>
'' Display text following the text field, e.g. showing the format.
useThemeRoller boolean <optional>
false true to add ThemeRoller classes.
keypadClass string <optional>
'' Additional CSS class for the keypad for an instance.
prompt string <optional>
'' Display text at the top of the keypad.
layout Array.<string> <optional>
this.numericLayout Layout of keys. One string per row.
separator string <optional>
'' Separator character between keys in the layout, empty string for one character keys.
target string | jQuery | Element <optional>
null Input target for an inline keypad.
keypadOnly boolean <optional>
true true for entry only via the keypad, false for real keyboard too.
randomiseAlphabetic boolean <optional>
false true to randomise the alphabetic key positions, false to keep them in order.
randomiseNumeric boolean <optional>
false true to randomise the numeric key positions, false to keep rhem in order.
randomiseOther boolean <optional>
false true to randomise the other key positions, false to keep them in order.
randomiseAll boolean <optional>
false true to randomise all key positions, false to keep them in order.
beforeShow BeforeShowCallback <optional>
null Callback before showing the keypad.
onKeypress KeypressCallback <optional>
null Callback when a key is selected.
onClose CloseCallback <optional>
null Callback when the panel is closed.
Source:

(inner) name

The name of the plugin.
Default Value:
  • 'keypad'
Source:

(inner) regionalOptions

Localisations for the plugin. Entries are objects indexed by the language code ('' being the default US/English). Each object has the following attributes.
Properties:
Name Type Attributes Default Description
buttonText string <optional>
'...' Display text for trigger button.
buttonStatus string <optional>
'Open the keypad' Status text for trigger button.
closeText string <optional>
'Close' Display text for close link.
closeStatus string <optional>
'Close the keypad' Status text for close link.
clearText string <optional>
'Clear' Display text for clear link.
clearStatus string <optional>
'Erase all the text' Status text for clear link.
backText string <optional>
'Back' Display text for back link.
backStatus string <optional>
'Erase the previous character' Status text for back link.
spacebarText string <optional>
'&#160;' Display text for space bar.
spacebarStatus string <optional>
'Space' Status text for space bar.
enterText string <optional>
'Enter' Display text for carriage return.
enterStatus string <optional>
'Carriage return' Status text for carriage return.
tabText string <optional>
'→' Display text for tab.
tabStatus string <optional>
'Horizontal tab' Status text for tab.
shiftText string <optional>
'Shift' Display text for shift link.
shiftStatus string <optional>
'Toggle upper/lower case characters' Status text for shift link.
alphabeticLayout string <optional>
this.qwertyAlphabetic Default layout for alphabetic characters.
fullLayout string <optional>
this.qwertyLayout Default layout for full keyboard.
isAlphabetic IsAlphabeticCallback <optional>
this.isAlphabetic Function to determine if character is alphabetic.
isNumeric IsNumericCallback <optional>
this.isNumeric Function to determine if character is numeric.
toUpper ToUpperCallback <optional>
this.toUpper Function to convert characters to upper case.
isRTL boolean <optional>
false true if right-to-left language, false if left-to-right.
Source:

Methods

(inner) addKeyDef(id, name, action, noHighlightopt) → {Keypad}

Add the definition of a special key.
Parameters:
Name Type Attributes Default Description
id string The identifier for this key - access via $.keypad.xxx.
name string The prefix for localisation strings and the suffix for a class name.
action KeyActionCallback The action performed for this key - receives inst as a parameter.
noHighlight boolean <optional>
false true to suppress highlight when using ThemeRoller.
Source:
Returns:
The keypad object for chaining further calls.
Type
Keypad
Example
$.keypad.addKeyDef('CLEAR', 'clear', function(inst) { plugin._clearValue(inst); });

(inner) disable(elem)

Disable the keypad for a jQuery selection.
Parameters:
Name Type Description
elem Element The target text field.
Source:
Example
$(selector).keypad('disable');

(inner) enable(elem)

Enable the keypad for a jQuery selection.
Parameters:
Name Type Description
elem Element The target text field.
Source:
Example
$(selector).keypad('enable');

(inner) hide(elem, durationopt)

Hide the keypad from view.
Parameters:
Name Type Attributes Description
elem Element The text field attached to the keypad.
duration string | number <optional>
The duration over which to close the keypad, as a named time or in milliseconds.
Source:
Example
$(selector).keypad('hide')

(inner) insertValue(input, value)

Update the text field with the selected value.
Parameters:
Name Type Description
input string | Element | jQuery The jQuery selector, input field, or jQuery collection.
value string The new character to add.
Source:
Example
$.keypad.insertValue(field, 'abc');

(inner) isAlphabetic(ch) → {boolean}

Is a given character alphabetic? For use with the isAlphabetic regional option. Returns true for standard English alphabetic characters.
Parameters:
Name Type Description
ch string The character to test.
Source:
Returns:
true if alphabetic, false if not.
Type
boolean
Example
isAlphabetic: $.keypad.isAlphabetic

(inner) isDisabled(elem) → {boolean}

Is the text field disabled as a keypad?
Parameters:
Name Type Description
elem Element The target text field.
Source:
Returns:
true if disabled, false if enabled.
Type
boolean
Example
var disabled = $(selector).keypad('isDisabled');

(inner) isNumeric(ch) → {boolean}

Is a given character numeric? For use with the isNumeric regional option. Returns true for standard English numbers.
Parameters:
Name Type Description
ch string The character to test.
Source:
Returns:
true if numeric, false if not.
Type
boolean
Example
isNumeric: $.keypad.isNumeric

(inner) show(elem)

Pop-up the keypad for a given text field.
Parameters:
Name Type Description
elem Element | Event The text field attached to the keypad or event if triggered by focus.
Source:
Example
$(selector).keypad('show');

(inner) toUpper(ch) → {string}

Convert a character to upper case. For use with the toUpper regional option.
Parameters:
Name Type Description
ch string The character to convert.
Source:
Returns:
Its uppercase version.
Type
string
Example
toUpper: $.keypad.toUpper