All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Customized Masked Rules

The MaskedTextBox enables you to define custom mask rules during its initialization.

To customize a mask rule, define it in the rules option. The component allows you to define mask rules as regular expressions or functions.

To escape any of the predefined rules, use the rules option.

class MaskedTextBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.mask = props.mask;
        this.rules = props.rules;
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MaskedTextBox
                        mask={this.mask}
                        rules={this.rules}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MaskedTextBoxContainer mask={'~^'} rules={{"~": /[+-]/, "^": function (char) { return char === "^";}}}/>,
    document.querySelector('my-app')
);
In this article