Skip to content
Related Articles
Open in App
Not now

Related Articles

What is onBeforeInputCapture Event in ReactJS ?

Improve Article
Save Article
  • Last Updated : 06 May, 2022
Improve Article
Save Article

React onBeforeInputCapture is an event handler that gets triggered when we make any modifications to the input file, like onBeforeInput, but the difference is that onBeforeInputCapture acts in the capture phase whereas onBeforeInput acts in the bubbling phase i,e. phases of an event.



<input  onBeforeInputCapture={function}/>

Creating React Application:

Step 1: Create a react project folder, for that open the terminal, and write the command npm create-react-app folder name. If you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

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: It will look like this:


Example: In this example, we are creating an input field with the label “Enter your name:”, and we are adding a default value as “default” to it. The onBeforeInputCapture event will call onBeforeInputCaptureHandler, a function that will show a text “onBeforeInputCapture” whenever any new value is added to the input field.



function App() {
    const onBeforeInputCaptureHandler = () => {
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <label>Enter your name:</label>
            <input type="text"
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!