دیدید تو بعضی از سایتا که میرید، تا پیامک کد ورود (OTP) میاد، مرورگر ازتون اجازه میگیره و خودش فیلد رو پر میکنه؟
این کار رو می‌تونید با کمک WebOTP API تو جاوااسکریپت انجام بدید.
برای شروع، اول باید توی کدهای HTML به اینپوتِ کد ورودتون ویژگی autocomplete="one-time-code" رو اضافه کنید:

<input type="text" autocomplete="one-time-code" inputmode="numeric" />

و بعد توی جاواسکریپت باید یه همچین کدی بزنید. کد زیر اول چک می‌کنه ببینه مرورگر اصلاً از این قابلیت پشتیبانی می‌کنه یا نه، و بعد منتظر رسیدن کد می‌مونه تا اونو وارد فیلد کنه:

if ("OTPCredential" in window) {
  const input = document.querySelector('input[autocomplete="one-time-code"]');
  if (!input) return;

  navigator.credentials
    .get({
      otp: { transport: ["sms"] },
    })
    .then((otp) => {
      input.value = otp.code;
    })
    .catch((err) => {
      console.error(err);
    });
}

فقط یه نکته ای هست که همه مرورگر ها این قابلیت رو پشتیبانی نمیکنن. این API جاوااسکریپتی در حال حاضر فقط روی مرورگرهای بر پایه کرومیوم (مثل کروم، اج و اپرا توی اندروید) کار می‌کنه و فایرفاکس ازش پشتیبانی نمی‌کنه. توی آیفون (سافاری) هم همون ویژگی autocomplete="one-time-code" که تو HTML نوشتیم باعث میشه خود کیبورد سیستم‌عامل، کد رو از پیامک بخونه و بالای کیبورد به کاربر پیشنهاد بده.

برای اینکه این سیستم کار کنه، حتماً باید سایتتون روی پروتکل امن (HTTPS) باشه و پیامک رو هم با یه فرمت خاص بفرستید.
مثلاً فرض کنید کاربر می‌خواد توی سایت cleverdevs.ir لاگین کنه. پیامک کد ورود باید دقیقاً به صورت زیر ارسال بشه تا سیستم‌عامل متوجه بشه و کد رو در اختیار مرورگر قرار بده (خط آخر خیلی مهمه):

This is a test otp code 
Your code : 123456

@cleverdevs.ir #123456

برای تست کردن کدهاتون روی لوکال‌هاست هم می‌تونید از ابزارهایی مثل pinggy یا cloudflare tunnel استفاده کنید تا بهتون یه دامنه موقت با SSL (HTTPS) بدن.

برای اطلاعات بیشتر هم یه سر به این لینک بزنید

https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API

#javascript
@CleverDevs - @CleverDevsGp