rails/css/jquery - highlight text behind element when element above it(with opacity:0.001) is selected

Question

I have password field on the page, where password shown is masked but I wanted users to copy the password in its clear text form and be able to paste it somewhere in another website.

I followed this article Mask text, but still allow users to copy it and created another input[type=text] field with opacity 0.001 and made this fields adjustment such that it overlaps with the password field

Now when users tries to copy password from password field, they are actually copying from another input field value whose opacity is very low.

But now I want to make users experience good when selecting password, because currently when copying users dont know whether the value is getting copied or not because they copying from another input field which is overlapped with another.

So I am in search of any css/jquery trick which will highlight the text(password asterisk) present behind the actual field(with opacity 0.001). So that users at-least come to know that their values is actually getting copied.

Thanks, Dean

Here is the jsfiddle for the same : http://jsfiddle.net/Fbnhd/ Here you will see default value for password is "abcdef", so when you try to copy from password field by selecting using your mouse and ctrl+c, you will get the actuall value(abcdef)..But there is not good user experience — Dinesh M, Aug 08 '13 at 11:11

score 0 · Accepted Answer · answered Aug 08 '13 at 15:54

Are you really sure you or your users need this or is this meant as a convenience feature? No password field that I have seen allows to copy. Unless advertised, the number of people using this feature will be close to zero. Maybe a “copy password” link with ZeroClipboard is a better solution?

Anyway, here’s the best I could come up with. It uses jQuery-textrange plugin to handle text selection across browsers. It needs rather recent versions, too. jsfiddle demo.

The main idea is to make the low-opacity field ignore mouse events, so the user can select text in the password field normally. The advantage is that we don’t need to handle selection rendering at all. This can be achieved by CSS:

#account-password-hide { pointer-events: none; }

Next, once the user finishes a selection we get the selection position and select the same portion in the low-opacity field. Unfortunately, this will clear the selection in the password field.

$("#account_password").select(function () {
    console.log("moving selection to hidden field");
    var pos = $("#account_password").textrange();
    $('#account-password-hide').textrange('set', pos.start, pos.end);
    $('#account-password-hide').css("pointer-events", "auto");
});

CTRL+C works now, and so does right click → copy because we set pointer-events: auto. If it were still none, then a right click would go into the actual password field, preventing the copy operation.

Lastly we need to reset the pointer-events so that the next click goes into the correct field again:

function reset() {
    $('#account-password-hide').css("pointer-events", "none");
}
$('#account-password-hide').mousedown(function (evt) {
    // allow right clicks
    if (evt.which !== 3) {
        reset();
    }
});
$('#account-password-hide').mouseup(function () {
    reset();
});
$('#account-password-hide').blur(function () {
    reset();
});

As far as I can tell, this basically works.

In order to keep the selection on focus change, you’d have to create an additional element that holds the same characters as the password field (i.e. same look as the asteriks/dots in the password field). Then you can highlight the selected characters using CSS system colors. Getting z-index and opacity for each of them right is going to take some testing though.

Thanks for this Awesome answer, this is exactly what I was looking for. I understood and tried the above code snippet..It worked really well.Apart from the issue you mentioned at the end that focus is not preserved when selecting and for that you have given some suggestions to implement..So as per your solution I will have to create another filed with similar(****) chars as value in it simialr to my password field and with some css property I have to show the selected test and need to overlap this element over the original passwd field when user has finished selec text.Am I corr with this? — Dinesh M, Aug 08 '13 at 18:05
Also as per your link given and even i tried pointer-events property in IE browser and it is not working in this browser and I am trying to find some alternative for this issue..If you already have solution that worked for you in IE then that will be a bonus for me..Anyway's thanks for this..I really like the jquery plugin and may be in future I should also approach the problem with this approach — Dinesh M, Aug 08 '13 at 18:09
Yes, I guess (haven’t tried) you need to place a `div` below the hidden field, above the password field once the `select`-event runs and hide it again on `reset`. As for pointer-events: it might be possible to simply use `z-index: -1` instead of pointer events none (and reset it whenever `pointer-events: auto`). You might also look at this question, if the `z-index` does not work: http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie — Stefan Breunig, Aug 08 '13 at 19:39

rails/css/jquery - highlight text behind element when element above it(with opacity:0.001) is selected

1 Answers1