score:-1

first include facebook datatransfer module:

var datatransfer = require('fbjs/lib/datatransfer');

then you can do:

onpaste: function (evt) {
       var data = new datatransfer(evt.clipboarddata);

       var text = data.gettext();
       var html = data.gethtml();
       var files = data.getfiles();
},

you welcome ;)

score:0

for me this is quick and worked.

onpaste event fires before the input's value is changed.

so we need to use e.persist()

<input 
   onpaste={(e)=>{
    e.persist();
    settimeout(()=>{ this.handlechange(e)},4)}
   }
   value={this.state.value}/>

score:1

the data can be found on clipboarddata, and parsed to string as follows:

event.clipboarddata.items[0].getasstring(text=>{
  // do something
})

score:5

here is maybe a simpler "no paste" example using react hooks

export default function nopasteexample() {
  const classes = usestyles();
  const [val, setval] = react.usestate("");
  const [pasted, setpasted] = react.usestate(false);

  const handlechange = e => {
    if (!pasted) {
      setval(e.target.value);
    }
    setpasted(false);
  };

  const handlepaste = () => {
    setpasted(true);
  };
  return (
    <form classname={classes.root} novalidate autocomplete="off">
      <div>
        <textfield
          value={val}
          onpaste={handlepaste}
          onchange={e => handlechange(e)}
        />
      </div>
    </form>
  );
}

live demo: https://codesandbox.io/s/material-demo-w61eo?fontsize=14&hidenavigation=1&theme=dark

score:11

https://developer.mozilla.org/en-us/docs/web/api/datatransfer/types

the formats are unicode strings giving the type or format of the data, generally given by a mime type. some values that are not mime types are special-cased for legacy reasons (for example "text").

example:

onpaste: function(e) {
    console.log(e.clipboarddata.getdata('text'));
    console.log(e.clipboarddata.getdata('text/plain'));
    console.log(e.clipboarddata.getdata('text/html'));
    console.log(e.clipboarddata.getdata('text/rtf'));

    console.log(e.clipboarddata.getdata('url'));
    console.log(e.clipboarddata.getdata('text/uri-list'));
    console.log(e.clipboarddata.getdata('text/x-moz-url'));
}

score:60

onpaste: function(e) {
    console.log(e.clipboarddata.getdata('text'));
},

Related Query

More Query from same tag