The problem in Pasting into Password Field
Google Lighthouse flags such situations and notifies you. Like in the image:
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:
- If the page doesn’t use
<input type = "password">
code, - 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:
- First, press
Control + Shift + J
. Mac users can pressCommand + Option + J
. This action will activate Google DevTools. - Then click on the Sources tab.
- Continue by expanding the Event Listener Breakpoints pane.
- Open the Clipboard list.
- Continue by typing paste in the checkbox.
- Try pasting a password into one of the password fields on your page.
- 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