Enabling emojis in HTML password fields across all platforms

Question

I am trying to enable the use of emojis in HTML Password fields on a page I am building. I have a password field defined as:

<input type="password" id="txtPassword" />

In Android Chrome, I can enter emojis from the keyboard (in this case, Swiftkey keyboard)

In Windows, I can't bring up the Emoji Palette (hotkey: Win + .) when the password field is focused. The palette does open when a standard text box is focused. I can also copy and paste emojis from a text box into the password box.

Is there a standard way to configure the password element to ensure all platforms support the operating system and browser default method of entering emojis?

Answer 1

Make a text input that is transparent and is on top of the password input, and then have what is typed in the text input enter into the password input.

const passwordInput = document.getElementById('txtPassword');
const passwordField = document.getElementById('fieldPassword');

passwordInput.addEventListener('input', function(event) {
     passwordField.value = this.value;
});

function togglePassword() {
  if (passwordField.type === "password") {
    passwordField.type = "text";
  } else {
    passwordField.type = "password";
  }
}

#txtPassword {
opacity: 0;
position: absolute;
z-index: 1;
}

<div>
<input type="text" id="txtPassword" />
<input type="password" id="fieldPassword"/>
<button onclick="togglePassword()">Show Password</button>
</div>