将文本从星号切换到普通文本

Question

I was wondering is it possible to have text starting out as ****** and when they click the eye it goes to 123456 ?

the number that I want to show/hide is in MySQL, and also what they use to reset their password, so would it also be possible to hide it after like 5-10 seconds.

Thanks, Tom

Answer 1

You can use <input type="password"> and change the type to "text" to show the characters visibly.

 let input = document.querySelector('input'); document.querySelector('button').addEventListener('click', function(e){ if(input.type === 'password') input.type = 'text'; else input.type = 'password'; });

 <input type="password" value="123456"> <button> Toggle </button>

Answer 2

If you don't want to use an input field, this is a very quick outline of what you could do:

 var resetCode = document.getElementById('resetCode'); var showCode = document.getElementById('showCode'); showCode.addEventListener('click', showHiddenText, false); function showHiddenText (e) { var _hidden = resetCode.getAttribute('data-hidden'); // check if the text is hidden so we're not triggering multiple timers if (!!_hidden) { resetCode.setAttribute('data-hidden', 'false'); resetCode.textContent = resetCode.getAttribute('data-value'); // reset the display after an arbitrary amount of time setTimeout(function () { resetCode.setAttribute('data-hidden', 'true'); resetCode.textContent = "******" }, 5000); } }

 <!-- data-hidden would be set by default --> <!-- data-value would be obtained from the server via ajax or templating engine --> <span id="resetCode" data-hidden="true" data-value="724814">******</span> <button id="showCode">Show Code</button>

Edit

In light of your comment, here's an update:

 var _timer; var resetCode = document.getElementById('resetCode'); var showCode = document.getElementById('showCode'); var hideCode = document.getElementById('hideCode'); showCode.addEventListener('click', clickShow, false); hideCode.addEventListener('click', clickHide, false); function clickHide () { var _hidden = resetCode.getAttribute('data-hidden'); if (!!_hidden) { hideTheThings(); clearTimeout(_timer); } } function clickShow () { var _hidden = resetCode.getAttribute('data-hidden'); if (!!_hidden) { showTheThings(); _timer = setTimeout(hideTheThings, 5000); } } function showTheThings () { hideCode.classList.remove('hidden'); showCode.classList.add('hidden'); resetCode.setAttribute('data-hidden', 'false'); resetCode.textContent = resetCode.getAttribute('data-value'); } function hideTheThings () { hideCode.classList.add('hidden'); showCode.classList.remove('hidden'); resetCode.setAttribute('data-hidden', 'true'); resetCode.textContent = "******"; }

 .hidden { display: none; }

 <!-- data-hidden would be set by default --> <!-- data-value would be obtained from the server via ajax or templating engine --> <span id="resetCode" data-hidden="true" data-value="724814">******</span> <button id="showCode">Show Code</button> <button id="hideCode" class="hidden">Hide Code</button>