запутать запись в текстовое поле в FF

Question

Мой двухэтапный вход в систему представляет собой форму, в которой вводятся имя пользователя и пароль, которая связана со второй формой, в которой необходимо ввести PIN-код.

Итак; заполните форму 1, отправьте, заполните форму 2, отправка и запись разрешена (при условии аутентификации).

Проблема в том, что текстовое поле PIN-кода в форме 2 - type = 'text', потому что я не хочу диалоговое окно сохранения пароля, которое будет отображаться при отправке. И, тем не менее, я хочу замаскировать от посторонних глаз, что бы пользователь ни вводил.

PIN-код никогда не должен сохраняться.

Большинство основных браузеров работают без JS. Firefox 72 - нет.

Я смотрел другие «решения», но они были для античных версий FF, и мне не удалось заставить их работать в FF72.

для ясность для других комментариев .... JS гарантирует, что PIN-код замаскирован дисками, но он отправляет его как type = 'password', что вызывает диалоговое окно сохранения пароля, которое я не хочу отображать.

Вот моя форма

 window.onload = function(){
            init(); 
        }
        function init(){
            var x = document.getElementById("PINcode");
            
            if( x ) {                 
                x.setAttribute("type","password");               
            }else{
                // do nothing
            }
        }     

 #PINcode {
        text-security:disc;
        -webkit-text-security:disc;
        -moz-text-security:disc;
    } 

    <form id='login-form-pin' class="form-signin" action="/$cp_location/pin-login.pl" method='post'>
    <div>
      <h1>WARNING:</h1>
      <p>$active_text</p>
      <label for="PINcode" class="sr-only">PIN Code</label>
      <input type="text" id="PINcode" name='PINcode' class="form-control" placeholder="Enter your PIN" required />
      <input class="btn btn-lg btn-primary btn-block" type="submit" name='Login' value="Enter your PIN" /> 
      <input type='hidden' name='action' value='personal pin entry' /> 
      <p>
        <a href="/$cp_location/resend_login_pin.pl?user=$entered_user_name&action=resend_pin">Send me a new PIN.</a>&nbsp;&nbsp;<a href="/$cp_location/login.pl?logout=Logout">Force Log Out</a>
      </p>        
    </div>        
    </form>

Этот JS не имеет никакого визуального эффекта в FF.

Autocomplete = 'one-time-code' здесь бесполезен. Появится диалоговое окно «сохранить пароль».

[редактируется по ходу выполнения] Теперь элемент формы выглядит следующим образом:

<input type="text" id="user_pin_code" name='user_pin_code' class="form-control" placeholder="Enter your PIN" onkeyup="obfuscateEntry();" autocomplete='off' required />

, и я использую JS, немного измененный по сравнению с этим найдено в другом потоке

<script>
actualText = ""; 
  
function obfuscateEntry() {
  var x = document.getElementById("user_pin_code").value;
  var tempText = x.replace(/\\*/g,"");

  console.log( 'x =   ' + x );


      if(tempText == "")
      {
        actualText = actualText.substr(0, actualText.length - 1);
      }
      else {
        actualText += x.replace(/\\*/g,"");
      }
  
  document.getElementById("user_pin_code").value = "";
  
  for (var i=0;i<x.length;i++)
  {
    document.getElementById("user_pin_code").value += "*";
    document.getElementById("PINcode").value = actualText;
  }
}

[/ edit]

Единственная оставшаяся проблема заключается в том, что скрипт может пропустить некоторые символы, если PIN-код вводится слишком быстро. Я думаю, что для этого потребуется отдельный вопрос, поэтому я опубликовал «решение» для других.