Want to get pasted value from Reactjs onPaste event. This code check the difference between the input value before pasting and after which I think that it’s not limited by any browser support.
Here is the Jsfiddle demo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | function getDifference(oldval, newval) { var i = 0; var j = 0; var result = ""; while (j < newval.length) { if (typeof (oldval[j]) === "undefined"){ if (oldval[j-result.length] != newval[j]){ result += newval[j]; } }else{ if (oldval[j] != newval[j]){ result += newval[j]; } } j++; } return result; } class TodoApp extends React.Component { constructor(props) { super(props) this.state={ pasting: false, beforePasting : "" }; this.paste = this.paste.bind(this); this.change = this.change.bind(this); } paste(e){ this.setState({pasting: true, beforePasting: e.target.value}); } change(e){ if(this.state.pasting){ var oldval = this.state.beforePasting; var newval = e.target.value; var pastedValue = getDifference(oldval, newval); console.log(pastedValue); this.setState({pasting: false}); } } render() { return ( <div> <input type="text" onPaste={this.paste} onChange={this.change} /> </div> ) } } ReactDOM.render(<TodoApp />, document.querySelector("#app")) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } input { margin-right: 5px; } |
1 2 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
