jQuery Number Input API

Name Type Default

allowNull Boolean true

Determines whether the widget's value could be null.

Code example

Set the allowNull property.

$('#jqxNumberInput').jqxNumberInput({allowNull: false});

Get the allowNull property.

var allowNull = $('#jqxNumberInput').jqxNumberInput('allowNull');

Try it: allowNull is set to false

decimal Number 0

Sets or gets the input's number.

Code examples

Set the decimal property.

$("#jqxNumberInput").jqxNumberInput({ decimal: 5 })

Get the decimal property.

var decimal = $('#jqxNumberInput').jqxNumberInput('decimal');

Try it: decimal is set to 2

disabled Boolean false

Determines whether jqxNumberInput is disabled.

Code examples

Set the disabled property.

$("#jqxNumberInput").jqxNumberInput({ disabled: true })

Get the disabled property.

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

Try it: disabled is set to true

disabled Boolean false

Sets or gets whether the widget is disabled.

Code example

Set the disabled property.

$('#jqxNumberInput').jqxNumberInput({disabled : true});

Get the disabled property.

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

Try it: disabled is set to true

decimalDigits Number 2

Indicates the number of decimal places to use in numeric values.

Code examples

Set the decimalDigits property.

$("#jqxNumberInput").jqxNumberInput({ decimalDigits: 3 })

Get the decimalDigits property.

var decimalDigits = $('#jqxNumberInput').jqxNumberInput('decimalDigits');

Try it: decimalDigits is set to 3

decimalSeparator Char '.'

Sets or gets the char to use as the decimal separator in numeric values.

Code examples

Set the decimalSeparator property.

$("#jqxNumberInput").jqxNumberInput({ decimalSeparator: "," })

Get the decimalSeparator property.

var decimalSeparator = $('#jqxNumberInput').jqxNumberInput('decimalSeparator');

Try it: decimalSeparator is set to ','

digits Number 8

Sets or gets the digits in the input

Code examples

Set the digits property.

$("#jqxNumberInput").jqxNumberInput({ digits: 8})

Get the digits property.

var digits = $('#jqxNumberInput').jqxNumberInput('digits');

Try it: digits is set to 5

groupSeparator Char ','

Sets or gets the string that separates groups of digits to the left of the decimal in numeric values.

Code examples

Set the groupSeparator property.

$("#jqxNumberInput").jqxNumberInput({ groupSeparator: "." })

Get the groupSeparator property.

var groupSeparator = $('#jqxNumberInput').jqxNumberInput('groupSeparator');

Try it: groupSeparator is set to '.'

groupSize Number 3

Sets or gets the number of digits in each group to the left of the decimal in numeric values.

Code examples

Set the groupSize property.

$("#jqxNumberInput").jqxNumberInput({ groupSize: 5 })

Get the groupSize property.

var groupSize = $('#jqxNumberInput').jqxNumberInput('groupSize');

Try it: groupSize is set to 2

height Number/String null

Sets or gets the height of the input in pixels.

Code examples

Set the height property.

$("#jqxNumberInput").jqxNumberInput({ height: '50px' })

Get the height property.

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

Try it: height is set to '25px'

inputMode String 'advanced'

Sets or gets the input's mode.

Possible Values:

'advanced'- the number input behavior resembles a masked input with numeric mask

'simple'-the  widget works as a normal textbox, but restricts the user's input to numbers

Code examples

Set the inputMode property.

$("#jqxNumberInput").jqxNumberInput({ inputMode: 'simple' });

Get the inputMode property.

var inputMode = $('#jqxNumberInput').jqxNumberInput('inputMode');

Try it: inputMode is set to 'simple'

min Number -99999999

Sets or gets the input's minimum value.

Code examples

Set the min property.

$("#jqxNumberInput").jqxNumberInput({ min: 5 })

Get the min property.

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

Try it: min is set to 2

max Number 99999999

Sets or gets the input's maximum value.

Code examples

Set the max property.

$("#jqxNumberInput").jqxNumberInput({ max: 50 })

Get the max property.

var max = $('#jqxNumberInput').jqxNumberInput('max');

Try it: max is set to 50

negativeSymbol String '-'

Sets or gets the string to use as negative symbol.

Code examples

Set the negativeSymbol property.

$("#jqxNumberInput").jqxNumberInput({ negativeSymbol: '-'})

Get the negativeSymbol property.

var negativeSymbol = $('#jqxNumberInput').jqxNumberInput('negativeSymbol');

Try it: symbolPosition is set to '-'

placeHolder String ""

Determines the widget's place holder displayed when the widget's value is null.

Code example

Set the placeHolder property.

$('#jqxNumberInput').jqxNumberInput({placeHolder: "Null Value"});

Get the placeHolder property.

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

Try it: placeHolder is set to "Null Value"

promptChar Char -

Sets or gets the prompt char displayed when an editable char is empty.

Possible Values:

'_'

'?'

';'

'#'

Code examples

Set the promptChar property.

$("#jqxNumberInput").jqxNumberInput({ promptChar: "#" })

Get the promptChar property.

var promptChar = $('#jqxNumberInput').jqxNumberInput('promptChar');

Try it: promptChar is set to '#'

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.

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

Get the rtl property.

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

Try it: rtl is set to true

readOnly Boolean false

Sets or gets the readOnly state of the input.

Code examples

Set the readOnly property.

$("#jqxNumberInput").jqxNumberInput({ readOnly: true })

Get the readOnly property.

var readOnly = $('#jqxNumberInput').jqxNumberInput('readOnly');

Try it: readOnly is set to true

spinMode String 'advanced'

Sets or gets the spin mode.

Possible Values:

'advanced'- the value is increased depending on the caret's position

'simple'-pecifies that the spin behavior is disabled

Code examples

Set the spinMode property.

$("#jqxNumberInput").jqxNumberInput({ spinMode: 'simple' });

Get the spinMode property.

var spinMode = $('#jqxNumberInput').jqxNumberInput('spinMode');

Try it: spinMode is set to 'simple'

spinButtons Boolean false

Shows or hides the spin buttons.

Code examples

Set the spinButtons property.

$("#jqxNumberInput").jqxNumberInput({ spinButtons: true });

Get the spinButtons property.

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

Try it: spinButtons is set to true

spinButtonsWidth Number 18

Sets or gets the width of the spin buttons.

Code examples

Set the spinButtonsWidth property.

$("#jqxNumberInput").jqxNumberInput({ spinButtonsWidth: 20 });

Get the spinButtonsWidth property.

var spinButtonsWidth = $('#jqxNumberInput').jqxNumberInput('spinButtonsWidth');

Try it: spinButtonsWidth is set to 30

spinButtonsStep Number 1

Sets or gets the increase/decrease step.

Code examples

Set the spinButtonsStep property.

$("#jqxNumberInput").jqxNumberInput({ spinButtonsStep: 1 });

Get the spinButtonsStep property.

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

Try it: spinButtonsStep is set to 10

symbol String ''

Sets or gets the string to use as currency or percentage symbol.

Code examples

Set the symbol property.

$("#jqxNumberInput").jqxNumberInput({ symbol: '$' })

Get the symbol property.

var symbol = $('#jqxNumberInput').jqxNumberInput('symbol');

Try it: symbol is set to '$'

symbolPosition String 'left'

Sets or gets the position of the symbol in the input.

Possible Values:

'left'

'right'

Code examples

Set the symbolPosition property.

$("#jqxNumberInput").jqxNumberInput({ symbolPosition: 'right'})

Get the symbolPosition property.

var symbolPosition = $('#jqxNumberInput').jqxNumberInput('symbolPosition');

Try it: symbolPosition is set to 'right'

textAlign String 'right'

Sets or gets the alignment.

Code examples

Set the textAlign property.

$("#jqxNumberInput").jqxNumberInput({ textAlign: "left" });

Get the textAlign property.

var textAlign = $('#jqxNumberInput').jqxNumberInput('textAlign');

Try it: textAlign is set to 'left'

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.

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

Get the template property.

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

Try it: template is set to 'success'

theme String ''

width Number/String null

Sets or gets the width of the input in pixels. Only positive values have effect.

Code examples

Set the width property.

$("#jqxNumberInput").jqxNumberInput({ width: '250px' })

Get the width property.

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

Try it: width is set to '250px'

change Event

This event is triggered when the value is changed and the control's focus is lost.

Code examples

Bind to the change event by type: jqxNumberInput.

$('#jqxNumberInput').on('change', function (event) 
{
    var value = event.args.value;
    var type = event.args.type; // keyboard, mouse or null depending on how the value was changed.
});

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

textchanged Event

This event is triggered when the user entered entered a text.

Code examples

Bind to the textchanged event by type: jqxNumberInput.

$('#jqxNumberInput').on('textchanged', function (event) 
{
    var text = event.args.text;
});

Try it: Bind to the textchanged event by type: jqxNumberInput.

valueChanged Event

This event is triggered after value is changed.

Code examples

Bind to the valueChanged event by type: jqxNumberInput.

$('#jqxNumberInput').on('valueChanged', function (event)
{
    var value = event.args.value;
});

Try it: Bind to the valueChanged event by type: jqxNumberInput.

clear Method

Clears the value.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the clear method.

$('#jqxNumberInput').jqxNumberInput('clear');

Try it: clears the value in the jqxNumberInput.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

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

Try it: destroys the jqxNumberInput.

focus Method

Focuses the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

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

Try it: focuses the jqxNumberInput.

getDecimal Method

Gets the value.

Parameter	Type	Description
None

Return Value
Number

Code examples

Invoke the getDecimal method.

var value = $('#jqxNumberInput').jqxNumberInput('getDecimal');

Try it: gets the decimal in the jqxNumberInput.

setDecimal Method

Sets the value.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the setDecimal method.

$('#jqxNumberInput').jqxNumberInput('setDecimal', 555);

Try it: sets the decimal in the jqxNumberInput.

val Method

Sets or gets the value.

Parameter	Type	Description
value	String

Return Value
String

Code examples

Get the value using the val method.

var value = $('#jqxNumberInput').jqxNumberInput('val');

// Get the value using jQuery's val.

var value = $('#jqxMaskedInput').val();

Set the value using the val method.

$('#jqxNumberInput').jqxNumberInput('val', 561.23);

// Set the value using jQuery's val.

$('#jqxNumberInput').val(1242);

Try it: sets the value in the jqxNumberInput.

Properties

Code example

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples