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

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

Determines whether jqxNumberInput is disabled.

Code examples

Set the disabled property.

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

Get the disabled property.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sets or gets the alignment.

Code examples

Set the textAlign property.

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

Get the textAlign property.

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

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

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

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

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

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

Clears the value.

Code examples

Invoke the clear method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Gets the value.

Code examples

Invoke the getDecimal method.

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

Sets the value.

Code examples

Invoke the setDecimal method.

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

Sets or gets the value.

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