Properties

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

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.
Try it: theme is set to 'energyblue'
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'

Events

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.

Methods

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.