Disable Pasting Text into HTML Form

Disable pasting text into HTML form

I recently had to begrudgingly disable pasting in a form element. To do so, I wrote a cross-browser* implementation of Internet Explorer's (and others') onpaste event handler. My solution had to be independent of any third-party JavaScript libraries.

Here's what I came up with. It doesn't completely disable pasting (the user can paste a single character at a time, for example), but it meets my needs and avoids having to deal with keyCodes, etc.

// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();

To make use of this in order to disable pasting:

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

---

* I know oninput isn't part of the W3C DOM spec, but all of the browsers I've tested this code with—Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7—support either oninput or onpaste. Out of all these browsers, only Opera doesn't support onpaste, but it does support oninput.

Note: This won't work on a console or other system that uses an on-screen keyboard (assuming the on-screen keyboard doesn't send keys to the browser when each key is selected). If it's possible your page/app could be used by someone with an on-screen keyboard and Opera (e.g.: Nintendo Wii, some mobile phones), don't use this script unless you've tested to make sure the on-screen keyboard sends keys to the browser after each key selection.

How to prevent user pasting text in a textbox?

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.

Disable copy paste in HTML input fields?

You can disable paste in your input as follows:

html:

<input type="text" value="" id="myInput">

javascript:

window.onload = () => {
 const myInput = document.getElementById('myInput');
 myInput.onpaste = e => e.preventDefault();
}

Talking about security, I wouldn't say that this makes any impact. You would usually use client side and well as server-side validation of data submitted by the user.

Disable Copy or Paste action for text box?

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.

How to restrict pasting text in an input text field in html

Using jquery, you could avoid paste using this

$('.textboxClass').on('paste', function(e) {
    e.preventDefault();
});

you can avoid copy paste and cut using this

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

Disable Paste action using Javascript (without include Jquery)

If you are using the reactjs, you can directly use the onPaste event in the input tag as given below. So it will restrict the paste action.

     <input
     type="text"
     name="userName"
     placeholder="Mobile number"
     onChange={e => this.onChangeNumber(e)}
     onPaste={e => {e.preventDefault()}}
     value={this.state.userName}                      
     maxLength="10"
     autoFocus
     autoComplete="off"
    />

If you want use the js, you can use the following code in your function. So that the paste action will get prevented.

    onChangeNumber =()=>{
       document.getElementByName('userName').onpaste=function(e){
         e.preventDefault();
       }
     }

---

Related Topics