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

Question

我想知道是否可以让文本以

******

开头，当他们点击眼睛时，它会变成

123456

？

我想要显示/隐藏的数字在 MySQL 中，也是他们用来重置密码的数字，所以也可以在 5-10 秒后隐藏它。

谢谢， 汤姆

Answer 1

您可以使用

<input type="password">

并将类型更改为

"text"

以可见地显示字符。

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

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 3

如果您不想使用输入字段，这是您可以执行的操作的快速概述：

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>

编辑

根据您的评论，这里有更新：

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>