diff --git a/README.md b/README.md index a11b6dc..7b9db73 100644 --- a/README.md +++ b/README.md @@ -124,11 +124,14 @@ A default `placeholder` will be generated from the mask's pattern, but you can p By default, the rendered ``'s `size` will be the length of the pattern, but you can pass a `size` prop to override this. +### `onKeyDown | onBeforeInput | onPaste` : `(event: SyntheticEvent) => any` + +These props will be invoked as usual, however, they are also handled internally and will invoke `onChange` when necessary. + ### Other props Any other props passed in will be passed as props to the rendered ``, except for the following, which are managed by the component: * `maxLength` - will always be equal to the pattern's `.length` -* `onKeyDown`, `onKeyPress` & `onPaste` - will each trigger a call to `onChange` when necessary ## MIT Licensed diff --git a/demo/src/index.js b/demo/src/index.js index 024e4b8..2052855 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -54,7 +54,7 @@ const App = React.createClass({

A React component which creates a masked <input/>

- +

You can even externally update the card state like a standard input element:

diff --git a/src/index.js b/src/index.js index 23b2b72..29b4dca 100644 --- a/src/index.js +++ b/src/index.js @@ -19,7 +19,10 @@ var MaskedInput = React.createClass({ mask: React.PropTypes.string.isRequired, formatCharacters: React.PropTypes.object, - placeholderChar: React.PropTypes.string + placeholderChar: React.PropTypes.string, + onKeyDown: React.PropTypes.func, + onBeforeInput: React.PropTypes.func, + onPaste: React.PropTypes.func }, getDefaultProps() { @@ -151,10 +154,17 @@ var MaskedInput = React.createClass({ } } } + + if (this.props.onKeyDown) { + this.props.onKeyDown(e) + } }, - _onKeyPress(e) { - // console.log('onKeyPress', JSON.stringify(getSelection(this.input)), e.key, e.target.value) + _onBeforeInput(e) { + // console.log('onBeforeInput', JSON.stringify(getSelection(this.input)), e.key, e.target.value) + if (this.props.onBeforeInput) { + this.props.onBeforeInput(e) + } // Ignore modified key presses // Ignore enter key to allow form submission @@ -185,6 +195,10 @@ var MaskedInput = React.createClass({ this.props.onChange(e) } } + + if (this.props.onPaste) { + this.props.onPaste(e) + } }, _getDisplayValue() { @@ -208,7 +222,7 @@ var MaskedInput = React.createClass({ maxLength={patternLength} onChange={this._onChange} onKeyDown={this._onKeyDown} - onBeforeInput={this._onKeyPress} + onBeforeInput={this._onBeforeInput} onPaste={this._onPaste} placeholder={placeholder || this.mask.emptyValue} size={size || patternLength}