fixed so masked input works with chrome auto-fill and on paste

Edit:
Rebased onto latest master
Only kept relevant change. Change to dist was dropped to help avoid
merge conflicts
Add phone number example to demo page

Author: Matt Wanner

demo/index.html

@@ -72,6 +72,7 @@
       leading: '',
       custom: '',
       changing: '',
+      phone: '',
       pattern: '1111 1111'
     }
   },
@@ -112,6 +113,10 @@ <h1><code>&lt;<a href="https://github.com/insin/react-maskedinput">MaskedInput</
         <label htmlFor="plate">License Plate:</label>
         <MaskedInput mask="AAA 1111" name="plate" id="plate" onChange={this._onChange} placeholder="ABC 1234"/>
       </div>
+      <div className="form-field">
+        <label htmlFor="phone">Phone Number:</label>
+        <MaskedInput mask="(111) 111-1111" name="phone" id="phone" onChange={this._onChange} placeholder="(999) 999-9999"/>
+      </div>
       <p>Mask placeholder characters can be escaped with a leading <code>\</code> to use them as static contents:</p>
       <div className="form-field">
         <label htmlFor="escaped">Escaped:</label>

src/index.jsx

@@ -71,6 +71,7 @@ var MaskedInput = React.createClass({
         this.mask.selection.end = this.mask.selection.start + sizeDiff
         this.mask.backspace()
       }
+      this.mask.setValue(e.target.value);
       var value = this._getDisplayValue()
       e.target.value = value
       if (value) {
@@ -146,6 +147,14 @@ var MaskedInput = React.createClass({
       setTimeout(this._updateInputSelection, 0)
       this.props.onChange(e)
     }
+    else {
+      this.mask.setValue(e.clipboardData.getData('Text'));
+      var value = this._getDisplayValue()
+      e.target.value = value
+      if (value) {
+        this._updateInputSelection()
+      }
+    }
   },
 
   _getDisplayValue() {