将文本从星号切换到普通文本。
将文本从星号切换到普通文本。
提问于 2021-07-15 21:30:42
我想知道是否有可能以******的形式开始发短信，当他们点击眼睛的时候，它就会转到123456
我想显示/隐藏的数字在MySQL中，还有他们用来重置密码的内容，所以也可以在5-10秒后隐藏密码。
谢谢，汤姆
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-15 21:52:52
如果您不想使用输入字段，这是一个非常快速的概要说明了您可以做什么：
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>
Stack Overflow用户
发布于 2021-07-15 21:45:07
您可以使用<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68400973
复制相关文章
相似问题
腾讯云开发者
