Disabling onpaste

I was signing an e-petition on 'Get Britain Cycling' on the HM Government petitions this morning and, as is getting increasingly common, it asked me for my email address twice but I couldn't paste into the second instance.¹

This is particularly annoying with Opera, which is my browser of choice for browsing (as opposed to site development) as it has a neat feature for filling in forms where it can remember your common data such as name, email address, postcode and so on and auto-fill as you start to type. So for example when I press "p" on a text field on a form a pull down select appears below the text field offering me "Paul", "paulatthehug", "Paul Oldham" and "paul@the-hug.org" thus²:

(I had to take a photo as triggered a screenshot hides the popup)

So for the first "Email" field this worked a treat: I pressed P, then ↓ four times, and Enter and I'd reliably and correctly entered my email address. Then I moved onto the "Email confirmation" field and this functionality didn't work. I've seen this behaviour before and not really stopped to think about it but time was short so with my mouse I just copied the email address I'd already entered in the first field and pasted it into the "Email confirmation" field ... and that didn't work either.

Arse.

I was getting annoyed now so, having filled in the petition, I went back to look at the source and found the problem. The <input> tag for the second email field had an attribute I'd never come across before:

onpaste="return false"

So that would explain it, they're disabling paste by making the JavaScript event ignore it. Bastards.

OK, so is there a fix for this? Yes there is, if you're using the right brower there are add ons.

Opera

You need Clipboard event blocker described by the author as:

Disable the oncut, oncopy and onpaste clipboard events, ensuring that Ctrl-c will copy the text you see and Ctrl-v will paste what you intend.

For us backwards people who view the web as more of a document interface than an application platform.

Nice. (Sadly it doesn't restore the default fields functionality, but at least you can paste again.)

Firefox

In the Mozilla Firefox add-on list there's Disable clipboard manipulations The author describes it thus:

This extension disables copy, paste and cut events for web pages. This way web pages can no longer use oncopy or onpaste handlers to learn what you are copying or pasting, they won't even know that you do it at all. And they won't be able to interfere to push unwanted content to your clipboard when you copy text.

There are legitimate uses for these events (online editors) but these are irrelevant for most people. It is very unlikely that you will ever notice the functionality loss.

Alternatively, for the clueful, as explained here, you can simply use about:config to change the value of dom.event.clipboardevents.enabled to false which achieves the same result³.

Chrome

Lurking in the Chrome Web Store is Unblock Clipboard Interaction in Form which:

Changes all onpaste attributes from input fields and textareas to 'return true'.

and it seems to do the job nicely.
Sadly this no longer works, nor does another one I tried so currently I have no easy fix for this in Chrome.

Internet Explorer

I've not even bothered thinking about Internet Explorer and I don't use that except for testing our sites). Get a proper browser people.

Anyway I hope this helps others who are pissed off by yet another attempt by web designers to make UIs worse.

P.S. See also The Perils of onpaste

1. This article was edited later in the day after a discussion on Facebook lead me to track down a suitable Chrome add-on and again on 25/04/13, see footnote 3. below.
2. I've got a similar sort of facility in Firefox via an add-on but I have to right click on the field for that and it's not quite so elegant as Opera's solution.
3. Thanks to Andrew for discovering this one.