What is onPasteCapture Event in ReactJS ?
Last Updated :
28 Nov, 2023
React onPasteCapture is an event handler that gets triggered whenever we paste some text in an input field. like onpaste, but the difference is that onPasteCapture acts in the capture phase whereas onPaste acts in the bubbling phase i.e. phases of an event.
Prerequisites:
Syntax:
<input onPasteCapture={function}/>
Steps to Create the React Application And Installing Module:
Step 1: Create a react project folder
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Project Structure:
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: This example includes an input field with the default value “Paste here!” and a <p> tag containing the text “Copy this line.” Upon pasting into the input field, the onPasteCapture event triggers onPasteCaptureHandler, logging “Paste Successfully” to the console.
Javascript
function App() {
const onPasteCaptureHandler = () => {
console.log( "Pasted Successfully!" );
};
return (
<div className= "App" >
<h1> Hey Geek!</h1>
<p>Copy this line</p>
<input
defaultValue= "Paste here!"
onPasteCapture={onPasteCaptureHandler}
></input>
</div>
);
}
export default App;
|
Step to Run the Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...