Enables or disables the jqxFormattedInput.

Code examples

Set the disabled property.

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

Get the disabled property.

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

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

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

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

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

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' (-263) in decimal.

Code example

Set the min property.

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

Get the min property.

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

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' (263 - 1) in decimal.

Code example

Set the max property.

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

Get the max property.

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

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

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

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

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

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

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

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

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

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
   
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /> 
   

• Set the widget's theme property to 'energyblue' when you initialize it.

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

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

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

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.
 
});

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. });
 

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. });
 

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;
});

Closes the jqxFormattedInput pop-up.

Code examples

Invoke the close method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Opens the jqxFormattedInput pop-up.

Code examples

Invoke the open method.

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

Renders the widget.

Code examples

Invoke the render method.

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

Refreshes the widget.

Code examples

Invoke the refresh method.

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

Selects the text in the input field.

Code examples

Invoke the selectAll method.

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

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

Code examples

Invoke the selectFirst method.

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

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

Code examples

Invoke the selectLast method.

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

Sets or gets the value.

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);