React UI Components Documentation

Sets or gets whether the widget is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets height of the masked input in pixels.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the masked input's mask.

• # - For digit character. Accepts values from 0 to 9
• 9 - For digit character. Accepts values from 0 to 9
• 0 - For digit character. Accepts values from 0 to 9
• A - For alpha numeric character. Accepts values from 0 to 9 and from a to z and A to Z.
• L - For alpha character. Accepts values from a to z and A to Z
• [abcd] - For character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen. For example, [abcd] is the same as [a-d]. Examples: [0-5] - accepts values from 0 to 5. [ab] - accepts only a or b.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} mask={'###-##-####'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the prompt char displayed when an editable char is empty.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} promptChar={'#'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the readOnly state of the input.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} readOnly={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the text alignment.

'right'

'left'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'} textAlign={'right'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the masked input's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets width of the masked input in pixels. Only positive values have effect.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the value is changed and the control's focus is lost.

Code examples

Bind to the change event of jqxMaskedInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} onChange={this.onChange} 
        width={250} value={'1000'}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxMaskedInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();  
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} onValueChanged={this.onValueChanged} 
        width={250} value={'1000'}
      />
    );
  }
 
  private onValueChanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();
 
  public componentDidMount(): void {
    this.myMaskedInput.current!.clear();
  }
   
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();
 
  public componentDidMount(): void {
    this.myMaskedInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();
 
  public componentDidMount(): void {
    this.myMaskedInput.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxMaskedInput, { IMaskedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmaskedinput';
 
class App extends React.PureComponent<{}, IMaskedInputProps> {
  private myMaskedInput = React.createRef<JqxMaskedInput>();
 
  public componentDidMount(): void {
    this.myMaskedInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxMaskedInput ref={this.myMaskedInput} 
        width={250} value={'1000'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);