Skip to content

diegodoumecq/react-input-mask

 
 

Repository files navigation

react-input-mask

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

Install

npm install react-input-mask --save

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 mask="+4\9 99 999 99" or mask={"+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.

formatChars : object

Defines format characters with characters as keys and corresponding RegExp string as values. Default ones:

{
  "9": "[0-9]",
  "a": "[A-Za-z]",
  "*": "[A-Za-z0-9]"
}

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.

About

Yet another react component for input masking

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%