JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<p>Standard form</p>
<form method="post">
    <input type="text" name="username" autocomplete="off">
    <input type="password" name="password" autocomplete="new-password">
    <input type="submit">
</form>

<p>Form with workaround (see javascript)</p>
<form method="post" class="pw-workaround">
    <input type="text" name="username" autocomplete="off">
    <input type="password" name="password" autocomplete="new-password">
    <input type="submit">
</form>

JavaScript

document.querySelectorAll(".pw-workaround input[type=password]").forEach(function (el) {
    el.addEventListener("keydown", function (event) {
        if (event.keyCode === 38 || event.keyCode === 40) {
            event.stopPropagation();
            event.preventDefault();
        }
    });

    function reset() {
        if (el.value === "") {
            el.value = " ";
            var oldColor = el.style.color;
            var oldCaretColor = el.style.caretColor;
            el.style.color = 'transparent';
            el.style.caretColor = 'black';
            if (el.setSelectionRange !== undefined) {
                el.setSelectionRange(0, 0);
            }
            setTimeout(function () {
                el.style.color = oldColor;
                el.style.caretColor = oldCaretColor;
                var value = el.value;
                if (value.endsWith(" ")) {
                    el.value = value.substr(0, value.length - 1);
                }
            }, 0);
        }
    }

    el.addEventListener("mouseup", reset);
    el.addEventListener("input", reset);
})