密码文字，无需输入标签即可切换

Question

您如何使用HTML完成以点显示文本，就像在密码字段中看到的那样：

Password: <input type="password" name="pwd">This text looks like dots</input>

不使用<input>吗？ 我想利用输入表单上下文之外的密码字段中的修订。

可以将其视为显示薪水的页面，并且我不想在文本框中显示信息，即，您不想给人留下您可以编辑薪水的印象，但是在加载页面时，我不会希望可以立即看到它，以防有人在看。 文本应以点显示，例如“薪水：●●●●●●●●（选中以查看）”，然后最终看起来像“薪水：54372.23（选中以隐藏）”。

Answer 1

一个基本的例子可能是：

$('[data-hidden-value] > .toggle').on('click', function () {
  var
    $wrapper = $(this).parent(),
    $display = $wrapper.find('.display'),
    revealed = $wrapper.data('revealed'),
    hiddenValue = String($wrapper.data('hidden-value'))
  ;

  $display.html(revealed ? hiddenValue.replace(/./g, '*') : hiddenValue);
  $wrapper.data('revealed', !revealed);
});

使用以下html：

Salary:

<span data-hidden-value="54372.23">
  <span class="display">********</span>
  <a class="toggle">(click to toggle)</a>
</span>

演示： http ： //jsfiddle.net/MH2h6/

Answer 2

根据您的小提琴，通过添加快速检查以查看是否显示隐藏数据或已编辑字符串来获得切换行为非常简单：

var $magics = $('.magic');
$magics.click( function () {
    var $magic = $(this);
    var password = $magic.data('password');
    $magic.text(($magic.text() == password) ? '****' : password);
});

观看演示 。

但这是徒劳的，因为您已将敏感信息嵌入到HTML中。 如果你想这样做的权利 ，你会需要发出一个AJAX请求到服务器，以获得您想要的数据。