Save password pop-up appears with encrypted password

Save password pop-up appears with encrypted password

I have an requirement for an web application that during login, while submitting login form the password should be transmitted as encrypted but also password manager's save password pop-up should show non encrypted plain password

Other than using hidden password field , is there any other solution

Login.jsp

<form id="loginForm" action="/login" method="post" autocomplete="off">
    <input type="text" name="username" id="username" placeholder="Username" autocomplete="off" autofocus>
    <input type="password" name="password" id="password" placeholder="Password" autocomplete="off" autofocus>
    <button type="button" id="loginButton">Login</button>
</form>

<script>
function encryptAndSubmitForm() {
    var passwordField = document.getElementById("password");
    var originalPassword = passwordField.value;
    
    // Delay to let password manager detect the plain password
    setTimeout(function() {
        // Replace the password with the encrypted version
        passwordField.value = "encrypted_" + originalPassword; // Encryption logic here
        
        // Submit the form after the password is encrypted
        document.getElementById("loginForm").submit(); 
    }, 100); // 100 milliseconds delay
}

document.getElementById("loginButton").addEventListener("click", encryptAndSubmitForm);
</script>

I have tried many other methods like delay form submission using timeout but nothing worked

the password should sent as encrypted meanwhile save password should show user provided plain password

is there a solution I can achieve both ?