Properties

NameTypeDefault
disabled boolean false

Enables or disables the jqxFormattedInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
decimalNotation FormattedInputDecimalNotation "default"
FormattedInputDecimalNotation: "default" | "exponential"

Sets or gets the notation in which to display decimal numbers.

Possible values

'default' - the default representation of decimal numbers, e.g. 1590;

'exponential' - representation of decimal numbers in scientific exponential notation (E notation), e.g. 1.59e+3.

dropDown boolean false

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.

Note: the dropdown requires an additional empty div element in the initialization div of jqxFormattedInput.

dropDownWidth number | string null

Sets or gets the width of the jqxFormattedInput's dropdown (pop-up).

height number | string null

Sets or gets the jqxFormattedInput's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        height={25} value={25300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
min number | string '-9223372036854775808'

Sets or gets the minimum value of the widget. The value of min should be in the same numeral system as value. The min property can be set to no less than '-9223372036854775808' (-263) in decimal. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        min={0} spinButtons={true} value={1} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
max number | string '9223372036854775807'

Sets or gets the maximum value of the widget. The value of max should be in the same numeral system as value. The max property can be set to no more than '9223372036854775807' (263 - 1) in decimal. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        max={111110100} spinButtons={true} value={11111101} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
placeHolder string ''

Sets or gets the jqxFormattedInput's placeholder. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        placeHolder={'Enter a number'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
popupZIndex number 20000

Sets or gets the pop-up's z-index. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        popupZIndex={99999}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
roundedCorners boolean true

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        roundedCorners={false} height={25} width={250} spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        rtl={true} height={25} width={250} spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
radix number | string 10

Sets or gets the radix of the jqxFormattedInput. The radix specifies the numeral system in which to display the widget's value.

Possible values

2 or 'binary' - specifies the binary numeral system. Allowed characters for this numeral system are the digits 0 and 1;

8 or 'octal' - specifies the octal numeral system. Allowed characters for this numeral system are the digits from 0 to 7;

10 or 'decimal' - specifies the decimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9;

16 or 'hexadecimal' - specifies the hexadecimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9 and letters from a to f (case insenstive). 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        radix={'hexadecimal'} value={'fd'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinButtons boolean true

Shows or hides the spin buttons.

Note: the spin buttons require an additional empty div element in the initialization div of jqxFormattedInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        spinButtons={true} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinButtonsStep number 1

Sets or gets the increase/decrease step. The value of spinButtonsStep is a decimal number. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        spinButtons={true} spinButtonsStep={3} height={25} width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
template FormattedInputTemplate 'default'
FormattedInputTemplate: "default" | "primary" | "success" | "warning" | "danger" | "info"

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.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        template={'primary'} spinButtons={true} height={25} width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        theme={'material'} spinButtons={true} height={25} width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
upperCase boolean false

Sets or gets whether to use upper case when the radix property is set to 16 or 'hexadecimal'. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        upperCase={true} radix={'hexadecimal'} value={'fd'} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value number | string '0'

Sets or gets the value of the jqxFormattedInput widget. The value is in the numeral system specified by the radix property. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        value={25300} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width number | string null

Sets or gets the jqxFormattedInput's width.

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxFormattedInput.

close Event

This event is triggered when the pop-up is closed.

Code examples

Bind to the close event of jqxFormattedInput.

open Event

This event is triggered when the pop-up is opened.

Code examples

Bind to the open event of jqxFormattedInput.

radixChange Event

This event is triggered when the radix is changed.

Code examples

Bind to the radixChange event of jqxFormattedInput.

Methods

NameArgumentsReturn Type
close None

Closes the jqxFormattedInput pop-up.

destroy None

Destroys the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
focus None

Focuses the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
open None

Opens the jqxFormattedInput pop-up.

render None

Renders the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.render();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
refresh None

Refreshes the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
selectAll None

Selects the text in the input field. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.selectAll();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
selectFirst None

Positions the caret in the beginning of the number in the input. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.selectFirst();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
selectLast None

Positions the caret at the end of the number in the input. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.selectLast();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
val value

Sets or gets the value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);