jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,349 lines • 68.4 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="binary, decimal, formatted input, Help Documentation, hexadecimal, input, jQuery, jQWidgets, jqxFormattedInput, numeral, numeral system, octal, radix" />
<meta name="description" content="This page represents the help documentation of the jqxFormattedInput widget." />
<title>jqxFormattedInput API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the jqxFormattedInput.
</p>
<h4>Code examples</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ disabled: false });</code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxFormattedInput').jqxFormattedInput('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d46muerj/">disabled
is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>decimalNotation</span>
</td>
<td>
<span>String</span>
</td>
<td>"default"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the notation in which to display decimal numbers.
</p>
<h4>Possible values</h4>
<p>
'default' - the default representation of decimal numbers, e.g. <em>1590</em>;
</p>
<p>
'exponential' - representation of decimal numbers in scientific exponential notation
(E notation), e.g. <em>1.59e+3</em>.
</p>
<h4>Code example</h4>
<p>
Set the <code>decimalNotation</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ decimalNotation: 'exponential' });</code></pre>
<p>
Get the <code>decimalNotation</code> property.
</p>
<pre><code>var radix = $('#jqxFormattedInput').jqxFormattedInput('decimalNotation');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m7yyjf87/">decimalNotation
is set to "exponential"
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>dropDown</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<p>
<em>Note:</em> the dropdown requires an additional empty <code>div</code> element
in the initialization <code>div</code> of jqxFormattedInput.
</p>
<h4>Code examples</h4>
<p>
Set the <code>dropDown</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ dropDown: true });</code></pre>
<p>
Get the <code>dropDown</code> property.
</p>
<pre><code>var dropDownWidth = $('#jqxFormattedInput').jqxFormattedInput('dropDown');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vg55ng5f/">dropDown
is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>dropDownWidth</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the width of the jqxFormattedInput's dropdown (pop-up).
</p>
<h4>Code examples</h4>
<p>
Set the <code>dropDownWidth</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ dropDownWidth: 200 });</code></pre>
<p>
Get the <code>dropDownWidth</code> property.
</p>
<pre><code>var dropDownWidth = $('#jqxFormattedInput').jqxFormattedInput('dropDownWidth');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rg25p17e/">dropDownWidth
is set to 200
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>height</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxFormattedInput's height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ height: "35px" });</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxFormattedInput').jqxFormattedInput('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kbfxk1ve/">height
is set to 35
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>min</span>
</td>
<td>
<span>String</span>
</td>
<td>'-9223372036854775808'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the minimum value of the widget. The value of min should be in the
same numeral system as <code>value</code>. The min property can be set to no less
than '-9223372036854775808' (-2⁶³) in decimal.
</p>
<h4>Code example</h4>
<p>
Set the <code>min</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ min: 'cc' });</code></pre>
<p>
Get the <code>min</code> property.
</p>
<pre><code>var min = $('#jqxFormattedInput').jqxFormattedInput('min');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zj7oqnuk/">min
is set to "0"
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>max</span>
</td>
<td>
<span>String</span>
</td>
<td>'9223372036854775807'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the maximum value of the widget. The value of max should be in the
same numeral system as <code>value</code>. The max property can be set to no more
than '9223372036854775807' (2⁶³ - 1) in decimal.
</p>
<h4>Code example</h4>
<p>
Set the <code>max</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ max: "1001" });</code></pre>
<p>
Get the <code>max</code> property.
</p>
<pre><code>var max = $("#jqxFormattedInput").jqxFormattedInput('max');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qzugkydz/">max
is set to "111110100"
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>placeHolder</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxFormattedInput's placeholder.
</p>
<h4>Code example</h4>
<p>
Set the <code>placeHolder</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ placeHolder: "Enter a number" });</code></pre>
<p>
Get the <code>placeHolder</code> property.
</p>
<pre><code>var placeHolder = $('#jqxFormattedInput').jqxFormattedInput('placeHolder');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ksf4a9vv/">placeHolder
is set to "Enter a number"
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>popupZIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>20000
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the pop-up's z-index.
</p>
<h4>Code example</h4>
<p>
Set the <code>popupZIndex</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ popupZIndex: 999999 });</code></pre>
<p>
Get the <code>popupZIndex</code> property.
</p>
<pre><code>var zIndex = $('#jqxFormattedInput').jqxFormattedInput('popupZIndex');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ft65obcf/">popupZIndex
is set to 99999
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>roundedCorners</span>
</td>
<td>
<span>boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the rounded corners functionality. This property setting has
effect in browsers which support CSS border-radius.
</p>
<h4>Code example</h4>
<p>
Set the <code>roundedCorners</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ roundedCorners: false });</code></pre>
<p>
Get the <code>roundedCorners</code> property.
</p>
<pre><code>var roundedCorners = $("#jqxFormattedInput").jqxFormattedInput('roundedCorners');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7gnswu2L/">roundedCorners
is set to false
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets a value indicating whether widget's elements are aligned to support
locales using right-to-left fonts.
</p>
<h4>Code example</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ rtl : true });</code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxFormattedInput').jqxFormattedInput('rtl');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/26xzzL5j/">rtl
is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>radix</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>10
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the radix of the jqxFormattedInput. The radix specifies the numeral
system in which to display the widget's value.
</p>
<h4>Possible values</h4>
<p>
2 or 'binary' - specifies the binary numeral system. Allowed characters for this
numeral system are the digits <em>0</em> and <em>1</em>;
</p>
<p>
8 or 'octal' - specifies the octal numeral system. Allowed characters for this numeral
system are the digits from <em>0</em> to <em>7</em>;
</p>
<p>
10 or 'decimal' - specifies the decimal numeral system. Allowed characters for this
numeral system are the digits from <em>0</em> to <em>9</em>;
</p>
<p>
16 or 'hexadecimal' - specifies the hexadecimal numeral system. Allowed characters
for this numeral system are the digits from <em>0</em> to <em>9</em> and letters
from <em>a</em> to <em>f</em> (case insenstive).
</p>
<h4>Code example</h4>
<p>
Set the <code>radix</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ radix: 'hexadecimal' });</code></pre>
<p>
Get the <code>radix</code> property.
</p>
<pre><code>var radix = $('#jqxFormattedInput').jqxFormattedInput('radix'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p8ym9zgo/">radix
is set to "hexadecimal"
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>spinButtons</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Shows or hides the spin buttons.
</p>
<p>
<em>Note:</em> the spin buttons require an additional empty <code>div</code> element
in the initialization <code>div</code> of jqxFormattedInput.
</p>
<h4>Code examples</h4>
<p>
Set the <code>spinButtons</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ spinButtons: false });</code></pre>
<p>
Get the <code>spinButtons</code> property.
</p>
<pre><code>var spinButtons = $('#jqxFormattedInput').jqxFormattedInput('spinButtons');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3r1zhe7c/">spinButtons
is set to false
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>spinButtonsStep</span>
</td>
<td>
<span>Number</span>
</td>
<td>1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the increase/decrease step. The value of <code>spinButtonsStep</code>
is a decimal number.
</p>
<h4>Code examples</h4>
<p>
Set the <code>spinButtonsStep</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ spinButtonsStep: 200 });</code></pre>
<p>
Get the <code>spinButtonsStep</code> property.
</p>
<pre><code>var spinButtonsStep = $('#jqxFormattedInput').jqxFormattedInput('spinButtonsStep');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u2j3eekp/">spinButtonsStep
is set to 2
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span86'>template</span>
</td>
<td>
<span>String</span>
</td>
<td>'default'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the template as an alternative of the default styles.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'default' - the default template. The style depends only on the "theme" property value.</code></pre>
<pre><code>'primary' - dark blue style for extra visual weight.</code></pre>
<pre><code>'success' - green style for successful or positive action.</code></pre>
<pre><code>'warning' - orange style which indicates caution.</code></pre>
<pre><code>'danger' - red style which indicates a dangerous or negative action.</code></pre>
<pre><code>'info' - blue button, not tied to a semantic action or use.</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>template</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ template: 'primary'});</code></pre>
<p>
Get the <code>template</code> property.
</p>
<pre><code>var template = $('#jqxFormattedInput').jqxFormattedInput('template');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nwykewe8/">template is set to 'primary'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
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:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /> </code></pre>
</code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ch9xx2ny/">theme
is set to 'energyblue'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>upperCase</span>
</td>
<td>
<span>boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether to use upper case when the <code>radix</code> property is set
to 16 or 'hexadecimal'.
</p>
<h4>Code example</h4>
<p>
Set the <code>upperCase</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ upperCase: true });</code></pre>
<p>
Get the <code>upperCase</code> property.
</p>
<pre><code>var upperCase = $("#jqxFormattedInput").jqxFormattedInput('upperCase');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d6fs2vg6/">upperCase
is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>value</span>
</td>
<td>
<span>String</span>
</td>
<td>'0'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the value of the jqxFormattedInput widget. The value is in the numeral
system specified by the <code>radix</code> property.
</p>
<h4>Code example</h4>
<p>
Set the <code>value</code> property.
</p>
<pre><code>$("#jqxFormattedInput").jqxFormattedInput({ value: '112' });</code></pre>
<p>
Get the <code>value</code> property.
</p>
<pre><code>var value = $('#jqxFormattedInput').jqxFormattedInput('value');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dhgL1zsp/">value
is set to "100111101011"
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>width</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxFormattedInput's width.
</p>
<h4>Code examples</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput({ width: 200 });</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxFormattedInput').jqxFormattedInput('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ch9xx2ny/">width
is set to 200
</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>change</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the value is changed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>change</code> event by type: jqxFormattedInput.
</p>
<pre><code>$("#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.
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/29fkq3zs/">Bind
to the change event by type: jqxFormattedInput.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>close</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the pop-up is closed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>close</code> event by type: jqxFormattedInput.
</p>
<pre><code>$('#jqxFormattedInput').on('close', function(){ // type your code here. });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gcc6keL3/">Bind
to the close event by type: jqxFormattedInput.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>open</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the pop-up is opened.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>open</code> event by type: jqxFormattedInput.
</p>
<pre><code>$('#jqxFormattedInput').on('open', function(){ // type your code here. });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/snmpyor1/">Bind
to the open event by type: jqxFormattedInput.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>radixChange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the radix is changed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>radixChange</code> event by type: jqxFormattedInput.
</p>
<pre><code>$("#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;
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/38e5pkb9/">Bind
to the radixChange event by type: jqxFormattedInput.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>close</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Closes the jqxFormattedInput pop-up.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>close</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('close'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8ju2bbgk/">closes
the jqxFormattedInput dropdown (pop-up)
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span68'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Destroys the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kk4cvoq3/">destroys
the formatted input
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>focus</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Focuses the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>focus</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('focus'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dgqLvpux/">focuses
the formatted input
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>open</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Opens the jqxFormattedInput pop-up.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>open</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('open'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xe852w1n/">opens
the jqxFormattedInput dropdown (pop-up)
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>render</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Renders the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>render</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('render');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/55w5avpj/">renders
the formatted input
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>refresh</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Refreshes the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>refresh</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('refresh'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dv6rgpza/">refreshes
the formatted input
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>selectAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Selects the text in the input field.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>selectAll</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('selectAll'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/quv7q587/">selects
the text in the formatted input
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>selectFirst</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Positions the caret in the beginning of the number in the input.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>selectFirst</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('selectFirst'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3wjbgu7b/">positions
the caret at the beginning of the formatted input
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>selectLast</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Positions the caret at the end of the number in the input.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>selectLast</code> method.
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('selectLast'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ct0kh1fc/">positions
the caret at the end of the formatted input
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>val</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the value.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>value</em></td>
<td>String/Number</td>
<td>(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</td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code examples</h4>
<p>
Get the <code>value</code>:
</p>
<pre><code>// @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();</code></pre>
<p>
Set the <code>value</code>:
</p>
<pre><code>$('#jqxFormattedInput').jqxFormattedInput('val', 700);
or
$('#jqxFormattedInput').val(700);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zwgyq720/">sets
the jqxFormattedInput value
</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>