8

I have two fields, one is emailid and another is password in my form. I want to prevent the user from pasting into those fields. They should be forced to enter manually, like Google Forms.

Robert MacLean
  • 39
  • 1
  • 6
StaticVariable
  • 5,253
  • 4
  • 23
  • 45
  • 15
    If someone wants to copy and paste, that's their decision, not yours. Preventing default OS/browser behaviour is *never* an acceptable solution. – Christian May 31 '12 at 04:03
  • 1
    It's been done before, but it's a bad idea, especially for emails and other plain text: it's more inconvenient than occasionally typing the wrong email address. – jpaugh May 31 '12 at 04:06
  • refer http://stackoverflow.com/questions/1226574/disable-copy-paste-into-html-form-using-javascript – Romil Kumar Jain May 31 '12 at 04:06
  • 1
    but i want to add some more functionality to my form, this copying can create problem to user in the case of password. – StaticVariable May 31 '12 at 04:07
  • possible duplicate? http://stackoverflow.com/questions/1226574/disable-copy-paste-into-html-form-using-javascript – James Manning May 31 '12 at 04:08
  • 2
    Again, if you're adding custom functionality and copy/pasting could cause an issue, that's *your* problem, not the users. Never try to solve your own problem by disadvantaging the user. – Christian May 31 '12 at 04:13
  • One of the first rules of UX is don't break default behaviors. – DA. May 31 '12 at 04:38
  • In the case of `type="password"` fields, some (most? all?) browsers don't let you _copy_ anyway. So if the user tries to copy from one password field to the next the results won't match and will immediately fail validation. If the user copies from some other source to paste into _both_ your password and confirm password fields then presumably that other source displayed the password in plain text and they knew it was correct. So what I'm saying is that in my opinion the whole thing is a bit of a non-issue. – nnnnnn May 31 '12 at 05:17

5 Answers5

12

You could disable ctrl+v combination and right click as well.

for IE, you may tap into following event handlers:

onpaste="return false;" 
oncut="return false;" 
oncontextmenu="return false;" 
oncopy="return false;".

Here is a workaround for all browsers:

function noCTRL(e) {
      var code = (document.all) ? event.keyCode : e.which;
      var ctrl = (document.all) ? event.ctrlKey : e.modifiers & Event.CONTROL_MASK;
      var msg = "Sorry, this functionality is disabled.";
      if (document.all) {
        if (ctrl && code == 86) {
          //CTRL+V
          alert(msg);
          window.event.returnValue = false;
        } else if (ctrl && code == 67) { 
         //CTRL+C (Copy)
          alert(msg);
          window.event.returnValue = false;
        }
      } else {
        if (ctrl == 2) {
          //CTRL key
          alert(msg);
          return false;
        }
      }
    }

In HTML section, your fields would look like:

Email :<input name="email" type="text" value=""/><br/>
Password :<input name="password" type="password" value=""/><br/>
Confirm Email :<input name="email" type="text" value="" onkeydown="return noCTRL(event)"/>    
Confirm Password :<input name="password" type="password" value="" onkeydown="return noCTRL(event)"/>

I don't think user can copy password fields if input type is password

Hope this helps.

Note:

  1. Disabling JavaScript in browser will let users do whatever they want
  2. Always Keep this in mind: respect user's freedom.
P.M
  • 2,880
  • 3
  • 43
  • 53
Alfred
  • 21,058
  • 61
  • 167
  • 249
  • You *could* disable them. I would not say one *should* disable them. – DA. May 31 '12 at 04:40
  • This wasn't working for me in OSX. The ctrl key is bound to '91' for example. If you have access to a 'jquery' like library check out this post: http://stackoverflow.com/questions/686995/catch-paste-input – TOBlender Nov 10 '14 at 18:10
  • 1
    @blasteralfredΨ yep I know, but this is the first search result when dealing with pasting in javascript, just giving people a route to another solution. – TOBlender Nov 12 '14 at 16:26
  • @SuperUberDuper lemme look into it – Alfred Jan 14 '16 at 17:25
12

2020 update

There are copy and paste events you can use to prevent these actions, or to modify the data being copied or pasted. (see the links for browser support)

<input type="text" onpaste="return false">

Or the longer javascript version:

const elem = document.getElementById('nopaste');

elem.addEventListener('paste', (event) => {
  event.preventDefault();
});
<input type="text" placeholder="can paste"><br>
<input type="text" id="nopaste" placeholder="can not paste">
potato
  • 995
  • 11
  • 19
0

You should use onpaste. The paste event fires when the user attempts to paste text.

HTML

<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">Try copying and pasting text into this field!</textarea>

<h3>Log:</h3>
<p id="log"></p>

JavaScript

function logCopy(event) {
  log.innerText = 'Copied!\n' + log.innerText;
}

function logPaste(event) {
  log.innerText = 'Pasted!\n' + log.innerText;
}

const editor = document.getElementById('editor');
const log = document.getElementById('log');

editor.oncopy = logCopy;
editor.onpaste = logPaste;
MD SHAYON
  • 7,001
  • 45
  • 38
0

Copy

document.addEventListener("copy", (e) => {
   console.log("copy")
});

Paste

document.addEventListener("paste", (e) => {
   console.log("paste")
});
Cybernetic
  • 12,628
  • 16
  • 93
  • 132
-1

2022 UPDATE:

For Input Elements to receive onChange event on paste action, mention onpaste option as below

<input onpaste='return true' onChange={handleChange}/>
Vinayak V Naik
  • 1,291
  • 1
  • 9
  • 7