Disable text insertion in HTML form

Question

Is there a way to use JavaScript to disable the ability to insert text into a text field in an HTML form?

eg. I have a simple registration form when a user needs to enter an email address twice. The second email entry is to check for typos in the first email entry. However, if the user copies / pastes his email, then this defeats the goal, and I experience problems with users because they entered the wrong letter and copied / pasted it.

Maybe I was unclear about my question, but I am not trying to prevent people from copying (or dragging) text in their browser. I just want them to not insert input into the text box in order to minimize user error.

Perhaps instead of using this “hack”, you can offer another solution to the main problem of what I'm trying to solve here? I have done less than a dozen user tests, and this has already happened twice. My audience does not have a high level of computer skills.

Answer 1

Recently, I was reluctant to disable insertion into a form element. To do this, I wrote a cross-browser * implementation of the onpaste Internet Explorer (and others) event handler. My solution was to be independent of any third-party JavaScript libraries.

Here is what I came up with. It does not completely disable the insert (for example, the user can insert one character at a time, for example), but he meets my needs and avoids dealing 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 use this to disable insertion:

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

---

* I know that oninput is not part of the W3C DOM specification, but all the browsers I tested with this code are: Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7, etc. support either oninput or onpaste. Of all these browsers, only Opera does not support onpaste, but it supports oninput.

Note. This will not work on the console or other system using the on-screen keyboard (provided that the on-screen keyboard does not send keys to the browser if each key is selected). If it is possible that your page / application can be used by someone with an on-screen keyboard and Opera (for example, Nintendo Wii, some mobile phones), do not use this script, if you have not checked, the on-screen keyboard sends keys to the browser after each key selection .

Answer 2

Do not do this. Do not mess with a custom browser. When copying and pasting into the email confirmation field, the user assumes responsibility for what they type. If they are stupid enough to copy + paste the wrong address (this happened to me), then this is their own damn mistake.

If you want to make sure that the email confirmation does not work, ask the user to check their E-Mail while waiting for your site ("Please open your email program in a new window"). Show email address in large thick letters ("Email confirmation was sent to .... made a mistake? Click here to change).

Better yet, if possible, allow the user to have limited access without confirmation. Thus, they can log in immediately, and you will improve your chances of keeping in touch with the visitor, even if confirmation mail is blocked for other reasons (for example, spam filters).

Answer 3

Add the "disablecopypaste" class to the inputs to which you want to disable copy functionality and add this jQuery script

  $(document).ready(function () { $('input.disablecopypaste').bind('copy paste', function (e) { e.preventDefault(); }); }); 

Answer 4

You can ..... but do not do this.

You should not change the default behavior for the users browser. This is really bad usability for your web application. Also, if the user wants to disable this hack, then they can simply disable javascript in their browser.

Just add these attributes to the text box.

 ondragstart="return false" onselectstart="return false" 

Answer 5

Having just received this, we can achieve this with onpaste:"return false" thanks to: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

We have various other options listed below.

 <input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br> 

Answer 6

Crazy idea: ask the user to send you an email as part of the registration process. This, obviously, would be inconvenient if clicking on the mailto link doesn’t work (for example, if they use webmail), but I see this as a way to guarantee typos and confirm the email address.

It will look like this: they fill out most of the form by entering their name, password and more. When they click submit, they actually click the link to send mail to your server. You have already saved your other information, so the message contains only a token, which indicates which account it is for.

Answer 7

How to send a confirmation email to the email address that you just entered twice, which has a link to the confirmation URL on your site, then you know that they have a message?

Anyone who does not click to acknowledge receipt of an email may incorrectly enter their email address.

Not an ideal solution, but just some ideas.

Answer 8

Extending @boycs , I would recommend using "on" as well.

 $('body').on('copy paste', 'input', function (e) { e.preventDefault(); }); 

Answer 9

You can use jquery

HTML file

 <input id="email" name="email"> 

jquery code

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

Answer 10

You can connect the "keydown" listener to the input field to determine if Ctrl + V keys are pressed, and if so, stop the event or set the input field to ".".

This will not handle right-clicking, pasting or pasting into the browser’s “Edit” menu. You may need to add a “last-length” counter to the keystroke listener and use the interval to check the current field length to see if it has been increasing since the last keystroke.

Also not recommended. Disabled paste form fields are extremely frustrating. The first time I can correctly enter the email address, so I reserve the right to insert it in the second block.

Answer 11

Add the second step to the registration process. The first page, as usual, but when you reload, display the second page and ask again about it. If this is important, the user can handle this.

Answer 12

if you need to use 2 email fields and worry that the user incorrectly inserted the same erroneous email address from field 1 into field 2, then I would say that it warns (or something more subtle) if the user inserts something into the second email field

 document.querySelector('input.email-confirm').onpaste = function(e) { alert('Are you sure the email you\'ve entered is correct?'); } 

this way you don’t turn off the insert, you just give them a friendly reminder to check what they supposedly typed in the first field and then inserted into the second field correctly.

however, perhaps the only autocomplete email field is all that is needed. most likely, they filled in their email correctly before on another site at some point, and the browser will offer to fill out the field with this email

 <input type="email" name="email" required autocomplete="email"> 

Answer 13

of

Some may suggest using Javascript to capture user actions, such as right-clicking or Ctrl + C / Ctrl + V, and then stopping the operation. But this is obviously not the best or easiest solution. The solution is integrated into the properties of the input field along with some event capture using Javascript.

To disable browser autocomplete, simply add the attribute to the input field. It should look something like this:

 <input type="text" autocomplete="off"> 

And if you want to refuse copying and pasting for this field, just add a Javascript event in which oncopy, onpaste and oncut calls will be recorded and make them return false, for example:

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

The next step is to use onselectstart to refuse to select the contents of the input field from the user, but it should be warned: this only works for Internet Explorer. The rest of the work works fine in all major browsers: Internet Explorer, Mozilla Firefox, Apple Safari (at least on Windows) and Google Chrome.

Answer 14

Check the correct MX record of the host for this message. This can eliminate errors to the right of the @ sign.

You can do this by calling AJAX before submitting and / or the server after submitting the form.

Answer 15

I am using this VanS JS solution:

 const element = document.getElementById('textfield') element.addEventListener('paste', e => e.preventDefault()) 

Answer 16

With jquery, you can do this with one simple code line.

HTML:

 <input id="email" name="email"> 

The code:

 $(email).on('paste', false); 

JSfiddle: https://jsfiddle.net/ZjR9P/2/

Answer 17

What about using CSS in a UIWebView? something like

 <style type="text/css"> <!—- * { -webkit-user-select: none; } --> </style> 

In addition, you can read detailed information about block copying using CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Answer 18

A simple solution: just cancel the registration process: instead of requiring confirmation at the end of the registration process, request confirmation at the beginning of it! That is, the registration process began with a simple form requesting an email address and nothing more. When sending an email with a link to a confirmation page unique to the sent email address. The user will go to this page, then the rest of the information for registration will be requested (username, full name, etc.).

This is simple, since the website does not even need to store anything until confirmation, the email address can be encrypted with a key and attached as part of the address of the confirmation page.

Answer 19

I did something similar to http://bookmarkchamp.com - there I wanted to detect when the user copied something into the HTML field. The implementation I came across was to constantly check the field to see if there was a lot of text at any time.

In other words: if once a millisecond there was no text, and now there were more than 5 characters ... then the user probably inserted something into the field.

If you want this to work in Bookmarkhamp (you need to register), paste the URL into the URL field (or drag and drop the URL there).

Answer 20

The way to resolve the email verification problem is as follows:

• Before you go through the main process - say, register a user - first ask for your email address.
• Create a unique code and send it to this email address.
• If the user entered the correct email address, he will receive a code.
• The user must enter this code along with his email address and other necessary information so that they can complete the registration. Please note that if this time they enter the wrong email address (or the wrong code) because it will not match the code, registration will not take place and the user will be informed immediately.
• If the email address, code and other registration information are entered correctly, registration is completed and the user can immediately start using the system. - There is no need to reply to any other email address in order to activate your account.

For greater security, the code should have a limited lifespan, and it should be allowed only once during the registration process. In addition, to prevent the appearance of malicious applications for robots, it is best to enable the first step using captcha or a similar mechanism.

Answer 21

Using jquery you can avoid copying and cutting with this

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

Answer 22

 Hope below code will work : <!--Disable Copy And Paste--> <script language='JavaScript1.2'> function disableselect(e){ return false } function reEnable(){ return true } document.onselectstart=new Function ("return false") if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script>