CODEWITHSUNDEEP
javascripthtmlvalidation
PeterS
PeterS

Reputation: 724

How to prevent user pasting text in a textbox?

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?

Upvotes: 32

Views: 75312

Answers (7)

smdhkv
smdhkv

Reputation: 187

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.

Upvotes: 0

GMKHussain
GMKHussain

Reputation: 4711

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>

Upvotes: 1

Chtioui Malek
Chtioui Malek

Reputation: 11515

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

Upvotes: 1

Morshedul Arefin
Morshedul Arefin

Reputation: 1538

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.

Upvotes: 66

Mallikarjuna Reddy
Mallikarjuna Reddy

Reputation: 1212

// 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.

Upvotes: 26

Abhishek
Abhishek

Reputation: 356

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'.

Upvotes: 5

Amrendra
Amrendra

Reputation: 2077

jQuery:

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

  });

or css:

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

or html attribute:

 set disabled="disabled";

Upvotes: -4

Related Questions