react-input-mask

Yet another React component for input masking with attention to small usability details with cursor position, copy-paste, etc.

Demo

http://sanniassin.github.io/react-input-mask/demo.html

Properties

mask : string

Mask string. Format characters are:
9: 0-9
a: A-Z, a-z
*: A-Z, a-z, 0-9

Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. For example, German phone mask with unremoveable prefix +49 will look like "+4\\9 99 999 99"

maskChar : string

Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.

alwaysShowMask : boolean

Show mask even in empty input without focus.

Example

var PhoneInput = React.createClass({
  render: function() {
    return <InputElement {...this.props} mask="+4\9 99 999 99" maskChar=" "/>;
  }
});

Known issues

Screen keyboard backspace may not work in Android 4.x browser due to broken input events.