Ionic Cordova App How to Disable Copy & Paste in Ion-Input Field

Question

I've tried solution by applying CSS styles to input field but its not working. Can I know is there any other suggested method?

.registration-input-box > input {
    --ion-color-success: transparent;
    -webkit-touch-callout: none;    
    -webkit-user-select: none;
    -ms-touch-callout: none;
    -ms-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
}

<ion-input type="tel" pattern="[0-9]*" class="registration-input-box"></ion-input>

You can listen event and cancel the action if the event is called. I think this thread can help you : https://stackoverflow.com/questions/47384952/directive-to-disable-cut-copy-and-paste-function-for-textbox-using-angular2/47385485 — Meadow, Jul 27 '20 at 08:08

score 0 · Answer 1 · edited Sep 05 '21 at 16:53

I had the same issue and seems like ionic doesn't have a quick option for this, but I found this HTML event attributes that we can add to the tag so we can prevent the user from copy, paste, drag or drop text in the input field.

onPaste = "return false"
onCopy = "return false"
onCut = "return false"
onDrag = "return false"
onDrop = "return false"
autocomplete = off

<ion-input onPaste="return false" 
           onCopy="return false" 
           onCut="return false" 
           onDrag="return false" 
           onDrop="return false" 
           autocomplete=off 
           type="tel" pattern="[0-9]*"></ion-input>

Ionic Cordova App How to Disable Copy & Paste in Ion-Input Field

1 Answers1