JSFiddle - React, Tailwind, and code Playground

by Terry Lin

HTML

<h1>Disable autofill</h1>
<div>
  <input id="hide-password" name="password" type="hidden" />
</div>
<div>
  <input id="display-password" type="password" />
</div>
<div>
  <button id="btn" type="button">
   display hidden input
  </button>
</div>

<br /><br />
Also try <a href="https://github.com/terrylinooo/disableautofill.js">disableautofill.js</a>.

CSS

div {
  padding: 5px;
}

JavaScript

const displayInput = document.querySelector('#display-password');
const hiddenInput = document.querySelector('#hide-password');
const btn = document.querySelector('#btn');

displayInput.addEventListener('keyup', (e) => {
	hiddenInput.value = e.target.value;
});

btn.addEventListener('click', (e) => {
	hiddenInput.setAttribute('type', 'text');
});