在所有平台的 HTML 密码字段中启用表情符号

Question

我正在尝试在我正在构建的页面上的 HTML 密码字段中启用表情符号。我的密码字段定义为：

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

在 Android Chrome 中，我可以从键盘输入表情符号（在本例中为 Swiftkey 键盘）

在 Windows 中，当密码字段聚焦时，我无法调出表情符号调色板（热键：Win + .）。当标准文本框获得焦点时，调色板会打开。我还可以将文本框中的表情符号复制并粘贴到密码框中。

是否有标准的方法来配置密码元素，以确保所有平台都支持操作系统和浏览器默认输入表情符号的方法？

Answer 1

在密码输入上方创建一个透明的文本输入，然后将文本输入中键入的内容输入到密码输入中。

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>