Password text & toggle without using Input Tag

Question

How do you accomplish displaying text in dots using HTML, like you would see in a password field such as this:

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

Without using an <input> ? I would like to utilize the redaction from a password field outside of the context of an input form.

Think of it like a page displaying a salary and I don't want to display the information in a text box, ie you don't want to give the impression that you can edit your salary, but when the page loads I don't want it to be visible right away in case someone is looking. The text should show up in dots as such "Salary: ●●●●●●●● (check to view)" and then end up looking like "Salary: 54372.23 (check to hide)".

Answer 1

A basic example could be:

$('[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);
});

with the following html:

Salary:

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

Demo: http://jsfiddle.net/MH2h6/

Answer 2

Based on your fiddle, it's pretty simple to get the toggling behavior by adding a quick check to see if you're displaying the hidden data or the redacted string:

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

See a demo .

But this is fruitless, because you have embedded the sensitive information into your HTML. If you want to do this right you're going to need to issue an AJAX request to your server to get the data you want.