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
- Calling two functions with onClick event
- How do I get the value from a React Img component
- React pagination component number of item displayed issue
- Adding an alert after an onSubmit within a function
- How to import css for only any component in Reactjs
- How can I create multiple routes using React Router v4 (Sidebar)?
- Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{}'
- ReactJS: How to determine if the application is being viewed on mobile or desktop browser
- How to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps
- How to use value within JS forms and onSubmit. Do I NEED a submit button?
- Single animation on stateless React component
- Pass props between components at the same level React js with hooks
- Promise.all is not waiting for the functions to finish
- How to get user informations from Firebase after page reloaded in Nuxt js project?
- Render React page dynamically using URL parameter
- React/Redux global state management based on Socket.IO responses on client side?
- Updating State Object Does Not Rerender Dynamically Created Component
- Auth based redirecting with react-router
- Fire redux dispatch in custom onclick event
- Type 'string' is not assignable to type for react-router-dom Link Component
- Access variable made in componentDidMount
- Why useState hook don't update while using loop inside useEffect()
- How do I use localstorage with redux?
- Callback doesn't receive the updated version of state even when it fires well after state changes
- React Hook Form require rules of Controller always triggering
- Information between several data in React Firebase
- React native call function in text element
- React-Transition-Group: findDOMNode is deprecated in StrictMode
- setState second argument callback function alternative in state hooks
- useState does not set state when initalized by RouteProps