Toggle Text from asterisk to Normal text

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

Arvind Kumar Avinash · Accepted Answer · 2025-02-24 21:23:57Z

2

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>

edited Feb 24, 2025 at 21:23

Arvind Kumar Avinash

81.4k10 gold badges100 silver badges144 bronze badges

answered Jul 15, 2021 at 21:45

Unmitigated

91.7k12 gold badges106 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mad_Tom05 Over a year ago

Ahh okay, i was just hoping it didn't have to be an input, Thanks! ill try that.

Rencesteven Balulao · Accepted Answer · 2025-02-24 17:14:06Z

1

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

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

answered Feb 24, 2025 at 17:14

Rencesteven Balulao

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Kyle Cayapat · Accepted Answer · 2024-11-11 02:23:10Z

0

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>

answered Nov 11, 2024 at 2:23

Kyle Cayapat

1

1 Comment

ruud Over a year ago

Please edit your post and add a brief explanation to your code. This helps future readers to see in one glance what the code is about.

AM Douglas · Accepted Answer · 2021-07-15 22:27:17Z

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>

Collectives™ on Stack Overflow

Toggle Text from asterisk to Normal text

4 Answers 4

1 Comment

1 Comment

1 Comment

Edit

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Edit

Comments

Your Answer

Sign up or log in

Post as a guest

Related