Yet another React component for input masking with attention to small usability details with cursor position, copy-paste, etc.
npm install react-input-mask --save
Also you can use it without module bundler
<!-- Load React first -->
<script src="https://unpkg.com/react/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<!-- Will be exported to window.ReactInputMask -->
<script src="https://unpkg.com/react-input-mask/dist/react-input-mask.min.js"></script>
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"}
Character to cover unfilled editable parts of mask. Default character is "_". If set to null or empty string, unfilled parts will be empty, like in ordinary input.
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]"
}
Show mask even in empty input without focus.
import React from 'react';
import InputMask from 'react-input-mask';
class PhoneInput extends React.Component {
render() {
return <InputMask {...this.props} mask="+4\9 99 999 99" maskChar=" " />;
}
}
Screen keyboard backspace may not work in Android 4.x browser due to broken input events.
Thanks to BrowserStack for help with testing on real devices