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

I wrote this question in general terms so others who view this could see how this would apply in the broader situation but I can make it much more specific, I'm sorry if this seems off-topic and unclear? — Nimjox, Apr 30 '14 at 16:30
How is this not specific and about programing? I fail to see how this does not meet the outlined guide lines in the help center? — Nimjox, Apr 30 '14 at 16:47
http://meta.stackoverflow.com/questions/251758/why-is-stack-overflow-so-negative-of-late?cb=1 — Nimjox, Apr 30 '14 at 16:50
There are a lot of ways to do this. Is there a reason you used input:password as a specific example? If it shouldn't look like editable elements, a simple span would suffice as well. — Yoshi, Apr 30 '14 at 16:52
I tried but it didn't work maybe I did something else wrong and this is why I'm asking such a stupid question? If that's the case I"m sorry. — Nimjox, Apr 30 '14 at 16:55
I think you're a bit to fixated on `type:password`. This works only for input elements, which have their predefined behavior. But you could easily use other elements to simulate what you need. I'll add a jsfiddle shortly. Also don't bother with the question closed, chances are it won't be reopened. — Yoshi, Apr 30 '14 at 17:00
OP is asking how to [redact](http://en.wikipedia.org/wiki/Redaction) information in the document. — 2rs2ts, Apr 30 '14 at 17:03
@Nimjox Create a working fiddle with your attempts there are alot of possiblities to do this. — Rahil Wazir, Apr 30 '14 at 17:04
So with the above fiddle you can see the salary when the page loads. I want it to be hidden by dot's until you click the box at which point you see the numbers in plain text (which is how it shows up now). The part I don't understand is how to get them to show up as dots first but not in a value box — Nimjox, Apr 30 '14 at 17:11
@2rs2ts Thanks for the edit about the redaction. I didn't know how to say it in proper terms. — Nimjox, Apr 30 '14 at 17:15

score 2 · Accepted Answer · answered Apr 30 '14 at 17:11

2

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/

answered Apr 30 '14 at 17:11

Yoshi

54,081
14
89
103

This is exactly what I was looking for thank you so much for helping me. The "data-hidden-value" is the key concept I didn't understand and couldn't find. – Nimjox Apr 30 '14 at 17:13
1

You're welcome. But mind that *data-hidden-value* is arbitrary, it's just a name I choose, and you could very well use another one. – Yoshi Apr 30 '14 at 17:14
Cool I didn't know I could do that. – Nimjox Apr 30 '14 at 17:16

score 1 · Answer 2 · answered Apr 30 '14 at 17:15

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.

I'm okay with it being there. I just don't want the info to be viewable right when the page loads. Just in case someone else is looking at the screen. — Nimjox, Apr 30 '14 at 17:18

Password text & toggle without using Input Tag

2 Answers2