手机键盘回显验证码

MDN

必须使用https，且如果是在微信浏览器中访问需要用域名（可以使用gitee部署一个地址来访问）

代码

<input type="text" autocomplete="one-time-code" inputmode="numeric" />
<script>
if ("OTPCredential" in window) {
  window.addEventListener("DOMContentLoaded", (e) => {
  	const input = document.querySelector('input[autocomplete="one-time-code"]');
  	if (!input) return;
  	const ac = new AbortController();
  	const form = input.closest("form");
  	if (form) {
      form.addEventListener("submit", (e) => {
      	ac.abort();
      });
  	}
  	navigator.credentials.get({
  	  otp: {transport: ["sms"] },
      signal: ac.signal,
  	})
  	.then((otp) => {
      input.value = otp.code;
      if (form) form.submit();
    })
    .catch((err) => {
      console.error(err);
  	});
  });
}
</script>

问题

IOS在微信内置浏览器和safari浏览器等部分浏览器中可能出现点击回显两次的问题，可以通过添加长度限制等方法解决。