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

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

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 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 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 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 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 alignment.

Code examples

Set the textAlign property.

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

Get the textAlign property.

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

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

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 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 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 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 to use as negative symbol.

Code examples

Set the negativeSymbol property.

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

Get the negativeSymbol property.

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

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

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 () 
{
    var value = event.args.value;
}); 

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

Clears the value.

Code examples

Invoke the clear method.

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

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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