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

i have password field on page, password shown masked wanted users copy password in clear text form , able paste somewhere in website.

i followed article mask text, still allow users copy it , created input[type=text] field opacity 0.001 , made fields adjustment such overlaps password field

now when users tries copy password password field, copying input field value opacity low.

but want make users experience when selecting password, because when copying users dont know whether value getting copied or not because copying input field overlapped another.

so in search of css/jquery trick highlight text(password asterisk) present behind actual field(with opacity 0.001). users at-least come know values getting copied.

thanks, dean

are sure or users need or meant convenience feature? no password field have seen allows copy. unless advertised, number of people using feature close zero. maybe “copy password” link zeroclipboard better solution?

anyway, here’s best come with. uses jquery-textrange plugin handle text selection across browsers. needs rather recent versions, too. jsfiddle demo.

the main idea make low-opacity field ignore mouse events, user can select text in password field normally. advantage don’t need handle selection rendering @ all. can achieved css:

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

next, once user finishes selection selection position , select same portion in low-opacity field. unfortunately, clear selection in password field.

$("#account_password").select(function () {     console.log("moving selection 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, , right click → copy because set pointer-events: auto. if still none, right click go actual password field, preventing copy operation.

lastly need reset pointer-events next click goes 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 can tell, works.

in order keep selection on focus change, you’d have create additional element holds same characters password field (i.e. same asteriks/dots in password field). can highlight selected characters using css system colors. getting z-index , opacity each of them right going take testing though.