如何隐藏文本/ div 并用星号替换它？

Question

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

我在想它更像是在密码表单输入中，您可以通过单击眼睛图标来隐藏密码。 但是，我需要一些不需要输入表单的东西，只是简单的 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() function。

$("#" + 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>