how to set value in javascript in html input field using MaskedPassword.js -

we using maskedpassword.js in 1 of our input field displayed below-

<input type="password" id="txttopin" name="txttopin" autocomplete="off" >         <script type="text/javascript">                  new maskedpassword(document.getelementbyid("txttopin"), '\u25cf');           </script> 

but when reloads page setting default value field using javascript followed-

document.getelementbyid("txttopin").value = "abcd"; 

now "abcd" getting displayed in plain format instead of masked format. can me out resolved issue.

note: please refer https://www.sitepoint.com/better-passwords-1-the-masked-password-field/ more details on maskedpassword.js.

you need several things pull off, based on source code provided need to:

1. wait dom loaded.
2. save reference of txttopin field , maskedpassword instance.
3. get new pin original txttopin _contextwrapper.
4. set value new pin.
5. use dopasswordmasking() method maskedpassword instance , pass new pin.

---

sample

// wait dom loaded document.addeventlistener('domcontentloaded', function() {    // used template maskedpassword class   // wrap inside span , add hidden field inside wrapper   var oldpin = document.getelementbyid("txttopin");   // save maskedpassword reference   var masker = new maskedpassword(oldpin, '\u25cf');     // new pin context wrapper   var pin = oldpin._contextwrapper.lastchild;   // set pin value   pin.value = 'abcd';   // set fullmask flag true   masker.fullmask = true;   // perform masking!   masker.dopasswordmasking(pin);  });