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, i.e. 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)".
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>