show_password_when_mousedown_hide_password_when_mouse_up_or_mouse_leave.js

// Having this or similar html

<input type="password" name="password" id="password">
<button id="toggleButton">Show password</button

// And wanting to display the password when mousedown and hide the password when mouseup or mouseleave
// In a similar way as is done in the firefox async login form
// If you are in firefox you can go to this url: about:accounts?action=signin&entrypoint=menupanel

const password = document.querySelector('#password');
const toggleButton = document.querySelector('#toggleButton');

toggleButton.addEventListener('mousedown', displayPassword);
toggleButton.addEventListener('mouseup', hidePassword);
toggleButton.addEventListener('mouseleave', hidePassword);

function displayPassword() {
    password.setAttribute('type', 'text');
}

function hidePassword() {
    password.setAttribute('type', 'password');
}