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> |
' ' | 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