密码文本和切换不使用输入标签答案

【问题标题】：Password text & toggle without using Input Tag密码文本和切换不使用输入标签
【发布时间】：2014-06-17 01:51:51
【问题描述】：

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

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

没有使用<input>?我想利用输入表单上下文之外的密码字段的编辑。

把它想象成一个显示薪水的页面，我不想在文本框中显示信息，即你不想给人一种可以编辑薪水的印象，但是当页面加载时我不希望它立即可见，以防有人正在寻找。文本应该以点显示，例如“薪水：●●●●●●●●（查看查看）”，然后最终看起来像“薪水：54372.23（查看隐藏）”。

【问题讨论】：

你能告诉我你为什么投反对票吗？
我笼统地写了这个问题，所以其他看到这个问题的人可以看到这将如何适用于更广泛的情况，但我可以让它更具体，如果这看起来离题，我很抱歉不清楚？
这不是具体的和关于编程的吗？我看不出这不符合帮助中心概述的指南？
meta.stackoverflow.com/questions/251758/…
我觉得你对type:password有点执着。这仅适用于具有预定义行为的输入元素。但是您可以轻松地使用其他元素来模拟您需要的东西。我很快就会添加一个 jsfiddle。也不要为关闭的问题而烦恼，它可能不会重新打开。

标签： javascript jquery html css redaction

【解决方案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/

【讨论】：

这正是我一直在寻找的东西，非常感谢您对我的帮助。 “data-hidden-value”是我不理解也找不到的关键概念。
不客气。但请注意，data-hidden-value 是任意的，它只是我选择的名称，您可以使用另一个名称。
酷我不知道我能做到。

【解决方案2】：

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

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

查看demo。

但这是徒劳的，因为您已将敏感信息嵌入到 HTML 中。如果您想这样做正确，您将需要向您的服务器发出 AJAX 请求以获取您想要的数据。

【讨论】：

我可以接受它。我只是不希望在页面加载时可以查看信息。以防其他人正在看屏幕。