How to prevent user pasting text in a textbox?

Question

I have this JS function that prevents user from typing characters

<script type="text/javascript">
function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode(key);
  var regex = /[0-9]|\./;
  if(!regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
</script>

<span>Radio Receive:</span>
<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="${cpCon.receiveNo}" required tabindex="34" />

But I noticed that when the user tried to paste a word from this textbox, the text can be entered. How can I prevent this without disabling the paste?

Check out the [onkeydown](http://www.w3schools.com/jsref/event_onkeydown.asp) event for blocking control characters. — Aiias, Mar 10 '13 at 07:49
check this similar question.. possible duplicate of http://stackoverflow.com/questions/5510129/how-to-disable-ctrlv-paste-with-jquery — Amitd, Mar 10 '13 at 08:11

score 65 · Accepted Answer · edited Jan 27 '15 at 01:10

65

Very Easy Solution:

<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="${cpCon.receiveNo}" required tabindex="34" onCopy="return false" onDrag="return false" onDrop="return false" onPaste="return false" autocomplete=off />

This worked for me very well. No one can paste now into your textbox using right button paste option of mouse or pressing ctrl+v from the keyboard.

edited Jan 27 '15 at 01:10

devios1

36,899
45
162
260

answered May 22 '13 at 02:38

codewitharefin

1,398
15
24

1

Great. I couldn't add the onPaste directly so had to add it with JavaScript: $("#stopPaste").attr("onPaste", "return false"); and that seems to do the trick – wunth Aug 31 '16 at 23:10
These techniques are all fairly simple to bypass if one has a small amount of know-how (dev tools -> delete node -> recreate node), so don't depend on them to work. – Matthew Wilcoxson Apr 04 '18 at 11:11
1

It's 2020 and onPaste="return false" still works, YEAH BABY!! – fourOhFour Oct 01 '20 at 17:21
This does not prevent pasting on Firefox/Linux at least. Using event.preventDefault() did work though. – joe Oct 06 '20 at 19:48
Why not just a simple onPaste="return false"? – Gary Bao 鲍昱彤 Feb 05 '21 at 02:04
The user can still copy by dragging text they've typed out of the field (or cutting it), so `ondragstart="return false"` and `oncut="return false"` may be worth adding as well. Then again, the user can open the console and use `document.querySelector(".txtbox").value = "foo"` if they really want to get text in. Minor nitpick, but HTML attributes should be lower case, and values should be quoted. This is the same answer as [this](https://stackoverflow.com/a/26255397/6243352) but without citation of the [original(?) source](https://sumtips.com/how-to/prevent-copy-cut-paste-text-field/). – ggorlen Jul 02 '23 at 06:11

score 26 · Answer 2 · edited Nov 05 '14 at 18:36

26

// To Disable the paste functionality

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

// Below One might be helpful for your functionality.

$(document).ready(function(){
  $('#txtInput').bind("paste",function(e) {
    validate(e);
  });
});

or

OnTabOut() or onblur() you can validate the entered / pasted text instead of handling the paste functionality.

edited Nov 05 '14 at 18:36

cuSK

809
11
26

answered Mar 10 '13 at 07:52

Mallikarjuna Reddy

1,212
2
20
33

2

what if I dont want to disable paste option? I only want to prevent user from typing or pasting characters. – PeterS Mar 10 '13 at 08:06
3

try to bind the your validation's (preventing the characters) to paste option like II case in the answer. – Mallikarjuna Reddy Mar 10 '13 at 08:10
Im sorry but I dont know exaclty how to implement JS function...I tried your second option and It can disable paste option...But I dont want to disbale this...I only want to prevent character in my textbox – PeterS Mar 10 '13 at 08:13
`OnTabOut()` no longer exists as it was deprecated in I believe 2015... – Cannicide Feb 02 '17 at 21:57

score 5 · Answer 3 · answered Aug 03 '14 at 11:45

I tried this in my Angular project and it worked fine without jQuery.

<input type='text' ng-paste='preventPaste($event)'>

And in script part:

$scope.preventPaste = function(e){
   e.preventDefault();
   return false;
};

In non angular project, use 'onPaste' instead of 'ng-paste' and 'event' instead of '$event'.

score 1 · Answer 4 · answered May 26 '17 at 10:07

If you simply need non editable kendoComboBox(), you could use kendoDropDownList() instead.

In my case i needed it to be enabled/disabled depending on user privileges, so here's the solution i came up with (this prevents key inputs and pasting values) :

if (user.hasRight()) {

  var myinput = $("#myinput").data("kendoComboBox");
  myinput.input.on("keydown", function (e) { e.preventDefault(); });
  myinput.input.bind("paste", function (e) { e.preventDefault(); });

}

You can test it here

score 1 · Answer 5 · answered Mar 30 '21 at 13:24

VanillaJS solution

function pasteNotAllowFunc(xid){
 let myInput = document.getElementById(xid);
     myInput.onpaste = (e) => e.preventDefault();
} 

pasteNotAllowFunc('pasteInput')

Paste
<input id="pasteInput" value="paste not allow"/>
<hr/>
Textarea
<textarea id="test" value="Copy me and try to paste"></textarea>

score 0 · Answer 6 · answered Apr 19 '23 at 18:59

HTML

<input type="text" name="ReceiveNo" id="ReceiveNo" class="form-control"  required oncopy="return false" oncut="return false" onpaste="return false" ondrag="return false" ondrop="return false" autocomplete=off />

JQUERY

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

To bind behavior of the element on cut, copy, paste drag and drop and prevent default.

Amrendra · Answer 7 · 2013-03-10T08:06:25.540

-4

jQuery:

    $(this).click(function () {
    $(".txtbox").attr("disabled", "disabled"); 

  });

or css:

.txtbox{
 display: none;
 visibility: hidden;
 }

or html attribute:

 set disabled="disabled";

edited Mar 10 '13 at 08:06

answered Mar 10 '13 at 07:49

Amrendra

2,019
2
18
36

4

if you use this, user will not be able to type in the textbox – Amitd Mar 10 '13 at 08:09

How to prevent user pasting text in a textbox?

7 Answers7

Linked