Disable Copy or Paste action for text box?

Question

I have two textboxes, and I want to prevent user from copying the value from the first (email) textbox and pasting it in the second (confirmEmail) textbox.

Email: <input type="textbox" id="email"><br/>
Confirm Email:    <input type="textbox" id="confirmEmail">

I have two solution in my mind:

1. Prevent copy action from the email textbox, or
2. Prevent paste action from the confirmEmail textbox.

Any idea about how to do it?

http://jsfiddle.net/S22ew/

Answer 1

Check this fiddle.

 $('#email').bind("cut copy paste",function(e) {
     e.preventDefault();
 });

You need to bind what should be done on cut, copy and paste. You prevent default behavior of the action.

You can find a detailed explanation here.

Answer 2

Use

oncopy="return false" onpaste="return false"

Email: <input type="textbox" id="email" oncopy="return false" onpaste="return false" ><br/>
Confirm Email:    <input type="textbox" id="confirmEmail" oncopy="return false" onpaste="return false">

http://jsfiddle.net/S22ew/4/

Answer 3

EX:

<input type="textbox" ondrop="return false;" onpaste="return false;">

Use these attributes in the required textbox in HTML. Now the drag-and-drop and the paste functionality are disabled.

Answer 4

Here is the updated fiddle.

$(document).ready(function(){
    $('#confirmEmail').bind("cut copy paste",function(e) {
        e.preventDefault();
    });
});

This will prevent cut copy paste on Confirm Email text box.

Hope it helps.

Answer 5

Try This

 $( "#email,#confirmEmail " ).on( "copy cut paste drop", function() {
                return false;
        });

Answer 6

you can try this:

   <input type="textbox" id="confirmEmail" onselectstart="return false" onpaste="return false;" oncopy="return false" oncut="return false" ondrag="return false" ondrop="return false" autocomplete="off">

Answer 7

UPDATE : The accepted answer provides the solution, but .on() is the method that should be use from now on.

"As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged."

http://api.jquery.com/bind/

Answer 8

Best way to do this is to add a data attribute to the field (textbox) where you want to avoid the cut,copy and paste.

Just create a method for the same which is as follows :-

function ignorePaste() {

$("[data-ignorepaste]").bind("cut copy paste", function (e) {
            e.preventDefault(); //prevent the default behaviour 
        });

};

Then once when you add the above code simply add the data attribute to the field where you want to ignore cut copy paste. in our case your add a data attribute to confirm email text box as below :-

Confirm Email: <input type="textbox" id= "confirmEmail" data-ignorepaste=""/>

Call the method ignorePaste()

So in this way you will be able to use this throughout the application, all you need to do is just add the data attribute where you want to ignore cut copy paste

https://jsfiddle.net/0ac6pkbf/21/

Answer 9

You might also need to provide your user with an alert showing that those functions are disabled for the text input fields. This will work

    function showError(){
     alert('you are not allowed to cut,copy or paste here');
    }
    
    $('.form-control').bind("cut copy paste",function(e) {
     e.preventDefault();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control"  oncopy="showError()" onpaste="showError()"></textarea>

Answer 10

You can try below code

$(document).ready(function() {
    $('#email, #confirmEmail').on("cut copy paste drop", function(e) {
         e.preventDefault();
         return false;
    });
});

add below code in the text boxes as attributes

onpaste="return false" oncut="return false" oncopy="return false" ondrag="return false" ondrop="return false" onselectstart="return false"

example:

<input type="textbox" id="email" onpaste="return false" oncut="return false" oncopy="return false" ondrag="return false" ondrop="return false" onselectstart="return false" />

Answer 11

<input type="text" oncut="return false" 
oncopy="return false" onpaste="return false" />

Answer 12

See this example. You need to bind the event key propagation

$(document).ready(function () {
    $('#confirmEmail').keydown(function (e) {
        if (e.ctrlKey && (e.keyCode == 88 || e.keyCode == 67 || e.keyCode == 86)) {
            return false;
        }
    });
});