insin / insin/react-maskedinput

Doesn't work in Mobile Internet Explorer

Open
#60 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
727
Forks
191
PR merge metrics
No merged PRs in 30d

Description

From what I've read Mobile Internet Explorer doesn't support the onKeyPress event, which is breaking this implementation. I've looked at the open pull request for android (https://github.com/insin/react-maskedinput/pull/47) and was able to make a working version that supports Android as well as browsers that support onKeyPress, by doing this:

```
var event = {};
if (!userAgent.match(/Android/i)) event.onKeyPress = this._onKeyPress;
else event.onBeforeInput = this._onKeyPress;
return (
this.input = r }
onChange={this._onChange}
onKeyDown={this._onKeyDown}
onPaste={this._onPaste}
{...event}
placeholder={this.props.placeholder}
value={this._getDisplayValue()}
/>
);
```

I wish there was some feature detection for onkeypress support or onbeforeinput support... any ideas anyone?
This works great for Android, but I also found that Mobile Internet Explorer wasn't working. I tried all kinds of ways to bind the functions in this env, but it came down to this. Most browsers fire events in this order from a keyboard input (key down -> key press -> before input -> input -> key up). But Mobile IE does this: (key down -> key up -> input) NOTE: no keypress and the input is post key up and no before input. Anyway, I hope this helps someone, but I wasn't able to quite get it to work on Mobile IE. For now I fall back to unmasked inputs for Mobile IE, but I'd really like to fix this if possible.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.