Disable Paste action using Javascript (without include Jquery)

Question

I have a text box for the login mobile number, I have to disable the paste action

Am working in ReactJs, The code that I used is Mention below.

<input
 type="text"
 name="userName"
 placeholder="Mobile number"
 onChange={e => this.onChangeNumber(e)}
 value={this.state.userName}                      
 maxLength="10"
 autoFocus
 autoComplete="off"
/>

I want to disable the paste action using the JS code without using jquery and any other packages. Anyone help me to complete this.

Thanks in Advance.

Answer 1

If you are using the reactjs, you can directly use the onPaste event in the input tag as given below. So it will restrict the paste action.

     <input
     type="text"
     name="userName"
     placeholder="Mobile number"
     onChange={e => this.onChangeNumber(e)}
     onPaste={e => {e.preventDefault()}}
     value={this.state.userName}                      
     maxLength="10"
     autoFocus
     autoComplete="off"
    />

If you want use the js, you can use the following code in your function. So that the paste action will get prevented.

    onChangeNumber =()=>{
       document.getElementByName('userName').onpaste=function(e){
         e.preventDefault();
       }
     }