如何隐藏text/div并用星号替换它

Question

我需要一些帮助。。这背后的想法就像一个简单的切换按钮，可以隐藏对象并用***替换空白区域。

我想这更像是在密码表单输入中，你可以通过点击眼睛图标来隐藏密码。然而，我需要一些不是必需的输入表单，只是简单的DIV

function toggler(divId) {
$("#" + divId).toggle();
.css('content', 'sadas');
}

.hidden {
display:none;
}

<a href="#" onclick="toggler('myContent');">this is a test</a>
<div id="myContent" class='hidden'>
<div>this is a test #1 </div>
</div>

我可以隐藏DIV，但留下空白区域，如何用*****替换这个空白区域？？

示例：我的余额是200美元[隐藏]我的余额是****[显示]

https://jsfiddle.net/qobgfLh6/

Answer 1

我写了一首小提琴。有些要点可以更好地管理。但我认为你正在寻找这样的东西。

其想法是添加另一个带有***占位符的div，并使用jQuery的toggleClass()函数。

$("#" + divId).toggleClass('hidden');
$("#myPlaceholder").toggleClass('hidden');

https://jsfiddle.net/qze8fydv/

Answer 2

试着使用这样的东西。

$(document).ready(function () { 
function handle(input, toggler) {
var inputValue = ""
var shouldShowAsterisks = false

input.change(function () {
inputValue = $(this).val()
})

toggler.click(function () {
shouldShowAsterisks = !shouldShowAsterisks
shouldShowAsterisks
? input.val("*".repeat(inputValue.length))
: input.val(inputValue)
input.prop("disabled", shouldShowAsterisks)
})
}
handle($(".enter"), $(".toggler"))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="enter" />
<button class="toggler">Hide</button>

Answer 3

function toggleElementMask(element){
//Regex to find *
let reg = /^*+$/g;
//If all * we are masked
let isMasked = element.innerText.match(reg);
if(!isMasked) {
//Store the original text
element.dataset.original = element.innerText;
//Replace the contente with the same amount of *
element.innerText = "*".repeat(element.innerText.length);
}else{
//Restore the text
element.innerText = element.dataset.original;
}
}
//Mask on page load
$(".masked").each(function(){
toggleElementMask(this);
});
//Click event handler
$(".toggleMask").on("click", function(e){
e.preventDefault();
toggleElementMask($($(this).attr("href"))[0]);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#myContent" class="toggleMask"> this is a test</a>
<div id="myContent" class='masked'>
<div>this is a test #1 </div>
</div>
<a href="#myContent2" class="toggleMask"> this is a test</a>
<div id="myContent2" class='masked'>
<div>Another one</div>
</div>

<a href="#myContent3" class="toggleMask"> this is a test</a>
<div id="myContent3" class='masked'>
<div>one with <span>a</span> span</div>
</div>