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'));
},
Source: stackoverflow.com
Related Query
- How to get pasted value from Reactjs onPaste event
- How to get value from contentEditable in reactjs
- How do I get the value in the parent from a child components <select> in ReactJS onSubmit()
- how can i get value from event in react?
- How to get a value of a non-alphanumeric key from and onChange event is JS/React
- how to get value from json object with its index number in reactjs like posts[2].title
- Reactjs how to get value from selected element
- How to get value from radio form in reactJS
- how to get value from select2 in reactjs
- How to get state value from Input Slider in one JS file to another - ReactJS
- how to get value from json click event array in react
- How to get parameter value from query string?
- How to get selected value of a dropdown menu in ReactJS
- How to get input text value on click in ReactJS
- ReactJS - How can I set a value for textfield from material-ui?
- React Hooks - How to get parameter value from query string
- How can I get the URL address from the browser in ReactJS (servers URL)
- How to get value from Select/Option component from Ant design
- How to get value from a react function within a react component
- How to get previous state value in reactjs
- How to get byte array from a file in reactJS
- How to use react ref to get value from html select element?
- How to get User information from JWT cookie in NextJS / ReactJS
- How to get html code from reactjs component
- How to get value from Multiple Checkbox to array in react?
- How to get numeric value from Reanmited Value?
- How can I get the value from an animated or interpolated value in React Native?
- How to get input value of TextField from Material UI without using onChange event?
- How to get value of bubble in amcharts when click event triggered
- how to get the key of a selected value from a dropdown in reactjs?
More Query from same tag
- React.NET uncaught TypeError: undefined is not a function
- getting error : TypeError: fs.readFileSync is not a function
- React PropTypes File type
- TS error using css "position" when passing style object to Emotion's css prop
- React native upload image Spring boot
- How can I Display a Component When I Search in Input React.js
- useState - do not rerender the state is set with the same object content
- How can I specify environment variables on the client side for graphql?
- How to render multiple reactjs elements inside one DIV using typescript (tsx)?
- How to pass parameter in material ui react styled component
- React Native: Passing props between components and componentWillMount() method
- React: Give back the child new inserted element to parent for update the state
- State Boolean Value Not Correct After OnChange is Called
- Is it possible to develop a create-react-app on a vps?
- Why am I getting a 400 response with a type error for my GraphQL query?
- Is it a bug? Value of pie chart showed twice react-chart.js and Chart.PieceLabel.js
- Redux combineReducers() isn't recognising state
- react-leaflet create a custom components
- Input Text validation in react for containing at least one character and one number
- MaterialUI: how to position items inside grid item?
- Render react component with twig conditions
- react router redirects but does not render with redux
- ReactJS render an array of items inside the state
- React hooks fetched data keeps chaining to previously fetched data
- Getting started with React, couldn't render the page passing props
- Tutorial: Intro to React - Rerendering the whole collection instead of the most recently changed element
- My links that should use my hooks to show/hide components are not working as expected
- Why is a ReactJS component using Hooks rendered once or twice depending on developer console is open or not?
- Post `<input type='file' />` array
- How to fix 'Objects are not valid as a React child'