Javascript:切换纯文本隐藏它像密码文本点击按钮

javascript: toggle plain text to hide it like password text on click of a button

本文关键字：文本 密码 按钮 隐藏 Javascript      更新时间：2023-09-26

我没有<input>或任何形式。我想要一些方法来切换一个纯文本的东西，如****点击一个按钮。

例如

我有

<p id='one'>google_yahoo</p>
<button id='two'>toggle</button>

所以当我点击一次按钮时，<p>应该变成:

<p>************</p>

然后当我点击按钮，然后我应该再次得到google_yahoo
但是在默认情况下，我希望它是*****格式。

我做了什么:

<script>
  function myfunction(){
  $("#two").click(function(){
  $("#one").text("abc");
  });
  };
</script>


有没有简单易懂的解决方案?

您需要创建一些变量来存储文本的值。在JSFiddle上试试。

var txt = document.getElementById('one');
var btn = document.getElementById('two');
var visible = 1;
var value = '';
btn.addEventListener('click', function(){
  if(visible){
    value = txt.innerHTML;
    txt.innerHTML = '*'.repeat(value.length);
  }else{
    txt.innerHTML = value;
  }
  visible = !visible;
});


var pMemory = null;
$('button').click(function() {
  var pElement = $('p').get(0);
  if (pMemory === null) {
    // save to cache
    pMemory = $(pElement).text();
  }
  
  if (pMemory === $(pElement).text()) {
    $(pElement).text('*'.repeat(pMemory.length));
  } else {
    $(pElement).text(pMemory);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>google_yahoo</p>
<button>toggle</button>

使用text-security css属性作为选项。

$(document).ready(function(){
  $("#two").on("click", function(){
    $("#one").toggleClass("password_field");
  })
  
})
.password_field{
 -webkit-text-security:disc; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id='one' class="password_field">google_yahoo</p>
<button id='two'>Toggle</button>

相关文章：