Do you truly believe that you or your users require this feature, or is it simply a convenience? Most password fields do not allow copying, so the number of people utilizing this function may be minimal unless actively promoted. Perhaps incorporating a "copy password" link with ZeroClipboard could provide a more efficient solution?
Here is my suggestion using the jQuery-textrange plugin to facilitate text selection across various browsers. Please note that this method requires relatively recent browser versions. You can view a demo on jsfiddle here.
The approach involves making the low-opacity field unresponsive to mouse events, allowing users to select text in the password field normally without needing to manage selection rendering. This can be accomplished with the following CSS code:
#account-password-hide { pointer-events: none; }
When a user finishes selecting text, we retrieve the selection position and replicate it in the low-opacity field. While this action will clear the selection in the password field, users can now use CTRL+C or right click → copy due to setting pointer-events: auto. If it remains none, right-clicking would direct to the actual password field instead.
Finally, we reset the pointer-events property to ensure subsequent clicks target the correct field:
function reset() {
$('#account-password-hide').css("pointer-events", "none");
}
$('#account-password-hide').mousedown(function (evt) {
if (evt.which !== 3) {
reset();
}
});
$('#account-password-hide').mouseup(function () {
reset();
});
$('#account-password-hide').blur(function () {
reset();
});
In essence, this method appears to be effective. To maintain selection focus during changes, creating an additional element mimicking the characters in the password field and styling them with CSS system colors could be explored. Achieving the appropriate z-index and opacity for each character may necessitate some experimentation.