-1

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

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

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

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

4

2 回答 2

2

一个基本的例子可能是：

$('[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/

于 2014-04-30T17:11:22.983 回答
1

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

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

查看演示。

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

于 2014-04-30T17:15:49.567 回答