rails/css/jquery - 当元素上方的元素（不透明度：0.001）被选中时，突出显示元素后面的文本

Question

我在页面上有密码字段，其中显示的密码被屏蔽，但我希望用户以明文形式复制密码并能够将其粘贴到另一个网站的某个位置。

我关注了这篇文章Mask text, but still allow users to copy it 并创建了另一个不透明度为 0.001 的 input[type=text] 字段，并对该字段进行了调整，使其与密码字段重叠

现在当用户试图从密码字段复制密码时，他们实际上是从另一个不透明度非常低的输入字段值复制。

但现在我想让用户在选择密码时体验良好，因为目前在复制时用户不知道该值是否被复制，因为他们从另一个输入字段复制，与另一个重叠。

所以我正在寻找任何可以突出显示实际字段后面的文本（密码星号）的 css/jquery 技巧（不透明度为 0.001）。这样用户至少会知道他们的价值观实际上被复制了。

谢谢， 院长

Answer 1

您确定您或您的用户需要此功能，或者这只是一种便利功能吗？我见过的没有密码字段允许复制。除非有广告，否则使用此功能的人数将接近于零。也许带有ZeroClipboard 的“复制密码”链接是更好的解决方案？

无论如何，这是我能想到的最好的。它使用jQuery-textrange plugin 来处理跨浏览器的文本选择。它也需要rather recent versions。 jsfiddle demo.

主要思想是让低不透明度字段忽略鼠标事件，因此用户可以正常选择密码字段中的文本。优点是我们根本不需要处理选择渲染。这可以通过 CSS 来实现：

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

接下来，一旦用户完成选择，我们将获得选择位置并在低不透明度字段中选择相同的部分。不幸的是，这将清除密码字段中的选择。

$("#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 现在可以工作了，右键单击 → 复制也可以，因为我们设置了pointer-events: auto。如果仍然是none，则右键单击将进入实际密码字段，从而阻止复制操作。

最后我们需要重置pointer-events，以便下次点击再次进入正确的字段：

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();
});

据我所知，这基本上是可行的。

为了使选择保持焦点更改，您必须创建一个附加元素，该元素包含与密码字段相同的字符（即与密码字段中的星号/点外观相同）。然后您可以使用CSS system colors 突出显示选定的字符。不过，为每个人正确获取z-index 和opacity 需要进行一些测试。