JavaScript：点击按钮时将纯文本切换为隐藏文本，就像密码文本一样

Question

我没有包含任何的<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>

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

- pyofey

---

将 innerHTML 存入一个变量中，并用 ***** 替换 innerHTML。当他们再次点击按钮时，将变量放回 innerHTML 中。 - Barmar

这并不是非常复杂的，你不应该需要专家为你编写它。 - Barmar

Stackoverflow.com的规则要求在提问之前先尝试解决问题，并分享你所尝试的内容。我们不是一个“让我来写代码”的服务。 - Marcos Pérez Gude

@Barmar，你能否提供一下代码呢？我不太擅长JS :/ - pyofey

我会考虑你们的观点，@Bhansa和@Barmar。谢谢。 - pyofey

Answer 1

你需要创建一些变量来存储你的文本值。在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;
});

- user6586783

Answer 2

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>

- Maju

---

这是唯一对我有效的方法，但我该如何使其默认隐藏呢？因为它在加载时显示文本并在单击时隐藏，我希望它默认情况下是隐藏的，并且需要单击才能显示。 - Adrian

Answer 3

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

$(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>

- bhansa