Question

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

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

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

将其视为显示薪水的页面，我不想在文本框中显示信息，即您不希望给人的印象是您可以编辑工资，但是页面加载我不希望它立即可见，以防有人正在寻找。文字应以点的形式显示为＆＃34;薪水：●●●●●●●●（查看查看）＆＃34;然后最终看起来像＆＃34;薪水：54372.23（检查隐藏）＆＃34;。

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);
});

查看demo。

但这没有结果，因为您已将敏感信息嵌入到HTML中。如果你想这样做正确，你需要向服务器发出一个AJAX请求来获取你想要的数据。

密码文字＆amp;不使用输入标签切换

2 个答案: