How to replace the onpaste function in javascript?

Question

An input element on a web page is defined like the following to prevent passwords being pasted in:

<input type="password" class="field" id="password" name="password" title="Enter your password" maxlength="50" onpaste="javascript:return false;" size="38" tabindex="2">

I want to enable pasting in this input field. Using Firebug or equivalent I can edit the onpaste function so the code is:

onpaste="javascript:return true;"

This is fine for me, but for other users, I want a simpler solution. What came to mind is that if I could give them some Javascript, they could open the console and paste in a simple one-liner. However when I tried to do this the Javascript had no effect. I tried the following and neither worked.

$('#password').onpaste=""
$('#password').onpaste="javascript:return true;"

What am I doing wrong?

Answer 1

The problem is that you're trying to combine jQuery with regular JavaScript. You can just use pure JavaScript to remove the onpaste listener.

document.getElementById('password').onpaste=""

If you want to use jQuery instead, you can use:

$('#password')[0].onpaste=""

which would give the same result.

Answer 2

Just remove the onpaste attribute of the DOM element, not of the jQuery object which does not have a onpaste property. Your code is creating a property (set to a string) that is just being ignored.

In the example below, you can click the button and paste will be re-enabled.

document.querySelector('button').addEventListener('click', function() {
    document.getElementById('password').removeAttribute('onpaste');
})

<input type="password" class="field" id="password" name="password" title="Enter your password" maxlength="50" onpaste="javascript:return false;" size="38" tabindex="2">

<button>Allow pasting</button>