jqxFormattedInput API Reference

Name Type Default

disabled Boolean false

Enables or disables the jqxFormattedInput.

Code examples

Set the disabled property.

$('#jqxFormattedInput').jqxFormattedInput({ disabled: false });

Get the disabled property.

var disabled = $('#jqxFormattedInput').jqxFormattedInput('disabled');

Try it: disabled is set to true

decimalNotation String "default"

Sets or gets the notation in which to display decimal numbers.

Possible values

'default' - the default representation of decimal numbers, e.g. 1590;

'exponential' - representation of decimal numbers in scientific exponential notation (E notation), e.g. 1.59e+3.

Code example

Set the decimalNotation property.

$("#jqxFormattedInput").jqxFormattedInput({ decimalNotation: 'exponential' });

Get the decimalNotation property.

var radix = $('#jqxFormattedInput').jqxFormattedInput('decimalNotation');

Try it: decimalNotation is set to "exponential"

dropDown Boolean false

Sets or gets whether the jqxFormattedInput's dropdown (pop-up) will be enabled. The dropdown allows the user to choose the radix (numeral system) of the displayed number.

Note: the dropdown requires an additional empty div element in the initialization div of jqxFormattedInput.

Code examples

Set the dropDown property.

$('#jqxFormattedInput').jqxFormattedInput({ dropDown: true });

Get the dropDown property.

var dropDownWidth = $('#jqxFormattedInput').jqxFormattedInput('dropDown');

Try it: dropDown is set to true

dropDownWidth Number/String null

Sets or gets the width of the jqxFormattedInput's dropdown (pop-up).

Code examples

Set the dropDownWidth property.

$('#jqxFormattedInput').jqxFormattedInput({ dropDownWidth: 200 });

Get the dropDownWidth property.

var dropDownWidth = $('#jqxFormattedInput').jqxFormattedInput('dropDownWidth');

Try it: dropDownWidth is set to 200

height Number/String null

Sets or gets the jqxFormattedInput's height.

Code examples

Set the height property.

$('#jqxFormattedInput').jqxFormattedInput({ height: "35px" });

Get the height property.

var height = $('#jqxFormattedInput').jqxFormattedInput('height');

Try it: height is set to 35

min String '-9223372036854775808'

Sets or gets the minimum value of the widget. The value of min should be in the same numeral system as value. The min property can be set to no less than '-9223372036854775808' (-2⁶³) in decimal.

Code example

Set the min property.

$("#jqxFormattedInput").jqxFormattedInput({ min: 'cc' });

Get the min property.

var min = $('#jqxFormattedInput').jqxFormattedInput('min');

Try it: min is set to "0"

max String '9223372036854775807'

Sets or gets the maximum value of the widget. The value of max should be in the same numeral system as value. The max property can be set to no more than '9223372036854775807' (2⁶³ - 1) in decimal.

Code example

Set the max property.

$("#jqxFormattedInput").jqxFormattedInput({ max: "1001" });

Get the max property.

var max = $("#jqxFormattedInput").jqxFormattedInput('max');

Try it: max is set to "111110100"

placeHolder String ''

Sets or gets the jqxFormattedInput's placeholder.

Code example

Set the placeHolder property.

$("#jqxFormattedInput").jqxFormattedInput({ placeHolder: "Enter a number" });

Get the placeHolder property.

var placeHolder = $('#jqxFormattedInput').jqxFormattedInput('placeHolder');

Try it: placeHolder is set to "Enter a number"

popupZIndex Number 20000

Sets or gets the pop-up's z-index.

Code example

Set the popupZIndex property.

$("#jqxFormattedInput").jqxFormattedInput({ popupZIndex: 999999 });

Get the popupZIndex property.

var zIndex = $('#jqxFormattedInput').jqxFormattedInput('popupZIndex');

Try it: popupZIndex is set to 99999

roundedCorners boolean true

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

Code example

Set the roundedCorners property.

$("#jqxFormattedInput").jqxFormattedInput({ roundedCorners: false });

Get the roundedCorners property.

var roundedCorners = $("#jqxFormattedInput").jqxFormattedInput('roundedCorners');

Try it: roundedCorners is set to false

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxFormattedInput').jqxFormattedInput({ rtl : true });

Get the rtl property.

var rtl = $('#jqxFormattedInput').jqxFormattedInput('rtl');

Try it: rtl is set to true

radix Number/String 10

Sets or gets the radix of the jqxFormattedInput. The radix specifies the numeral system in which to display the widget's value.

Possible values

2 or 'binary' - specifies the binary numeral system. Allowed characters for this numeral system are the digits 0 and 1;

8 or 'octal' - specifies the octal numeral system. Allowed characters for this numeral system are the digits from 0 to 7;

10 or 'decimal' - specifies the decimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9;

16 or 'hexadecimal' - specifies the hexadecimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9 and letters from a to f (case insenstive).

Code example

Set the radix property.

$("#jqxFormattedInput").jqxFormattedInput({ radix: 'hexadecimal' });

Get the radix property.

var radix = $('#jqxFormattedInput').jqxFormattedInput('radix');

Try it: radix is set to "hexadecimal"

spinButtons Boolean true

Shows or hides the spin buttons.

Note: the spin buttons require an additional empty div element in the initialization div of jqxFormattedInput.

Code examples

Set the spinButtons property.

$('#jqxFormattedInput').jqxFormattedInput({ spinButtons: false });

Get the spinButtons property.

var spinButtons = $('#jqxFormattedInput').jqxFormattedInput('spinButtons');

Try it: spinButtons is set to false

spinButtonsStep Number 1

Sets or gets the increase/decrease step. The value of spinButtonsStep is a decimal number.

Code examples

Set the spinButtonsStep property.

$('#jqxFormattedInput').jqxFormattedInput({ spinButtonsStep: 200 });

Get the spinButtonsStep property.

var spinButtonsStep = $('#jqxFormattedInput').jqxFormattedInput('spinButtonsStep');

Try it: spinButtonsStep is set to 2

template String 'default'

Determines the template as an alternative of the default styles.

Possible Values:

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

Code examples

Set the template property.

$("#jqxFormattedInput").jqxFormattedInput({ template: 'primary'});

Get the template property.

var template = $('#jqxFormattedInput').jqxFormattedInput('template');

Try it: template is set to 'primary'

theme String ''

upperCase boolean false

Sets or gets whether to use upper case when the radix property is set to 16 or 'hexadecimal'.

Code example

Set the upperCase property.

$("#jqxFormattedInput").jqxFormattedInput({ upperCase: true });

Get the upperCase property.

var upperCase = $("#jqxFormattedInput").jqxFormattedInput('upperCase');

Try it: upperCase is set to true

value String '0'

Sets or gets the value of the jqxFormattedInput widget. The value is in the numeral system specified by the radix property.

Code example

Set the value property.

$("#jqxFormattedInput").jqxFormattedInput({ value: '112' });

Get the value property.

var value = $('#jqxFormattedInput').jqxFormattedInput('value');

Try it: value is set to "100111101011"

width Number/String null

Sets or gets the jqxFormattedInput's width.

Code examples

Set the width property.

$('#jqxFormattedInput').jqxFormattedInput({ width: 200 });

Get the width property.

var width = $('#jqxFormattedInput').jqxFormattedInput('width');

Try it: width is set to 200

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event by type: jqxFormattedInput.

$("#jqxFormattedInput").on("change", function (event) {
    // event arguments
    var args = event.args;
    // new value
    var value = args.value;
    // old value
    var oldValue = args.oldValue;
    // radix
    var radix = args.radix;
    // type
    var type = args.type; // keyboard, mouse or null depending on how the value was changed.                       
});

Try it: Bind to the change event by type: jqxFormattedInput.

close Event

This event is triggered when the pop-up is closed.

Code examples

Bind to the close event by type: jqxFormattedInput.

$('#jqxFormattedInput').on('close', function(){ // type your code here. });

Try it: Bind to the close event by type: jqxFormattedInput.

open Event

This event is triggered when the pop-up is opened.

Code examples

Bind to the open event by type: jqxFormattedInput.

$('#jqxFormattedInput').on('open', function(){ // type your code here. });

Try it: Bind to the open event by type: jqxFormattedInput.

radixChange Event

This event is triggered when the radix is changed.

Code examples

Bind to the radixChange event by type: jqxFormattedInput.

$("#jqxFormattedInput").on("radixChange", function (event) {
    // event arguments
    var args = event.args;
    // new radix
    var radix = args.radix;
    // old radix
    var oldRadix = args.oldRadix;
    // new value
    var value = args.value;
    // old value
    var oldValue = args.oldValue;
});

Try it: Bind to the radixChange event by type: jqxFormattedInput.

close Method

Closes the jqxFormattedInput pop-up.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the close method.

$('#jqxFormattedInput').jqxFormattedInput('close');

Try it: closes the jqxFormattedInput dropdown (pop-up)

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxFormattedInput').jqxFormattedInput('destroy');

Try it: destroys the formatted input

focus Method

Focuses the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

$('#jqxFormattedInput').jqxFormattedInput('focus');

Try it: focuses the formatted input

open Method

Opens the jqxFormattedInput pop-up.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the open method.

$('#jqxFormattedInput').jqxFormattedInput('open');

Try it: opens the jqxFormattedInput dropdown (pop-up)

render Method

Renders the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.

$('#jqxFormattedInput').jqxFormattedInput('render');

Try it: renders the formatted input

refresh Method

Refreshes the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

$('#jqxFormattedInput').jqxFormattedInput('refresh');

Try it: refreshes the formatted input

selectAll Method

Selects the text in the input field.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the selectAll method.

$('#jqxFormattedInput').jqxFormattedInput('selectAll');

Try it: selects the text in the formatted input

selectFirst Method

Positions the caret in the beginning of the number in the input.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the selectFirst method.

$('#jqxFormattedInput').jqxFormattedInput('selectFirst');

Try it: positions the caret at the beginning of the formatted input

selectLast Method

Positions the caret at the end of the number in the input.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the selectLast method.

$('#jqxFormattedInput').jqxFormattedInput('selectLast');

Try it: positions the caret at the end of the formatted input

val Method

Sets or gets the value.

Parameter	Type	Description
value	String/Number	(if 'binary', 'octal', 'decimal' or 'hexadecimal' is passed) or decimal notation (if 'exponential', 'scientific' or 'engineering' is passed). If no parameter is passed, returns the displayed value of the jqxFormattedInput

Return Value
String

Code examples

Get the value:

// @param format (optional) - if passed, returns the value in the specified numeral system
(if 'binary', 'octal', 'decimal' or 'hexadecimal' is passed)
or decimal notation (if 'exponential', 'scientific' or 'engineering' is passed).
If no parameter is passed, returns the displayed value of the jqxFormattedInput;
var value = $('#jqxFormattedInput').jqxFormattedInput('val', 'binary');
or
var value = $('#jqxFormattedInput').val();

Set the value:

$('#jqxFormattedInput').jqxFormattedInput('val', 700);
or
$('#jqxFormattedInput').val(700);

Try it: sets the jqxFormattedInput value

Properties

Code examples

Possible values

Code example

Code examples

Code examples

Code examples

Code example

Code example

Code example

Code example

Code example

Code example

Possible values

Code example

Code examples

Code examples

Code examples

Code example

Code example

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples