The problem in Pasting into Password Field

Google Lighthouse flags such situations and notifies you. Like in the image:

Pasting into Password Field

The system collects all <input type = "password"> codes to do this. It then pasted into each element. This allows the system to verify that the content of the element is set to be pasted text.

Google lighthouse cannot perform detecting in two situations:

  1. If the page doesn’t use <input type = "password"> code,
  2. If pasting takes place outside of the paste event listener

How to pass the audit? – Finding the code preventing pasting

You can find the code that prevents password pasting by following the steps below:

  1. First, press Control + Shift + J. Mac users can press Command + Option + J. This action will activate Google DevTools.
  2. Then click on the Sources tab.
  3. Continue by expanding the Event Listener Breakpoints pane.
  4. Open the Clipboard list.
  5. Continue by typing paste in the checkbox.
  6. Try pasting a password into one of the password fields on your page.
  7. DevTools pauses at the first line of the corresponding code.

How to remove the code preventing pasting?

In many cases, the main problem is the code snippet called preventDefault(). You can remove the entire event listener.

let input = document.querySelector('input');

input.addEventListener('paste', (e) => {
  e.preventDefault(); // This is what prevents pasting.

Test Your Website Issues

You can quickly analyze your site