React MaskedInput API Reference

Name	Type	Default
disabled	boolean	false
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);
height	string \| number	null
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);
mask	string	'#####'
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);
promptChar	number \| string	"_"
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);
readOnly	boolean	false
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);
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 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);
theme	string	''
/* 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);
textAlign	MaskedInputTextAlign	left
MaskedInputTextAlign: "left" \| "right" Sets or gets the text alignment. Possible Values: `'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);
value	number \| string	null
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);
width	string \| number	null
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);
Events
change	Event
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);
valueChanged	Event
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);
Methods
Name	Arguments	Return Type
clear	None
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);
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 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);
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 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);
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 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);

Properties

Events

Code examples

Code examples

Methods