jqwidgets-framework

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