javascript - 如何使用MaskedPassword.js在html输入字段的javascript中设置值

我们在下面显示的输入字段之一中使用 MaskedPassword.js -

<input type="password" id="txttoPin" name="txttoPin" autocomplete="off" >
        <script type="text/javascript">
            new MaskedPassword(document.getElementById("txttoPin"), '\u25CF');
        </script>

但是，当我们重新加载页面时，我们正在使用javascript对此字段设置一些默认值，如下所示:

document.getElementById("txttoPin").value = "abcd";

现在，“abcd” 以纯格式而不是掩码格式显示。
谁能帮我解决这个问题。

注意:有关MaskedPassword.js的更多详细信息，请引用https://www.sitepoint.com/better-passwords-1-the-masked-password-field/。

最佳答案

根据需要提供的源代码，您需要执行以下几项操作:

等待DOM完全加载。

保存txttoPin字段和MaskedPassword实例的引用。

从原始txttoPin _contextwrapper获取新的图钉。

从新的pin设置值。

使用doPasswordMasking()实例中的MaskedPassword方法并传递新的pin。

SAMPLE

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {

  // This will be used as a template for the MaskedPassword class
  // to wrap it inside a span and add a hidden field inside the wrapper
  var oldPin = document.getElementById("txttoPin");
  // save MaskedPassword reference
  var masker = new MaskedPassword(oldPin, '\u25CF');
  // get the new pin from the context wrapper
  var pin = oldPin._contextwrapper.lastChild;
  // set pin value
  pin.value = 'abcd';
  // set fullmask flag to true
  masker.fullmask = true;
  // perform masking!
  masker.doPasswordMasking(pin);

});