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

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

我跟随本文创建了另一个不透明度为0.001的输入[type=text]字段，并对该字段进行了调整，使其与密码字段重叠

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

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

因此，我正在搜索任何css/jquery技巧，它将突出显示实际字段后面的文本密码星号，不透明度为0.001。这样用户至少会知道他们的值实际上被复制了

谢谢，

---

Dean

你真的确定你或你的用户需要这个功能吗，还是说这是一个方便的功能？我看到的密码字段不允许复制。除非发布广告，否则使用此功能的人数将接近于零。也许使用“复制密码”链接是更好的解决方案

无论如何，这是我能想出的最好的办法。它用于处理跨浏览器的文本选择。它也需要

其主要思想是使低透明度字段忽略鼠标事件，因此用户可以正常选择密码字段中的文本。优点是我们根本不需要处理选择渲染。这可以通过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现在可以工作，右键单击也可以→ 复制，因为我们设置了指针事件：自动。如果仍然为“无”，则右键单击将进入“实际密码”字段，从而阻止复制操作

最后，我们需要重置指针事件，以便下一次单击再次进入正确的字段：

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

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

---

为了使选择保持焦点变化，您必须创建一个附加元素，该元素包含与密码字段相同的字符，即与密码字段中的星号/点相同的外观。然后，可以使用高亮显示选定的字符。但是，要使每个问题的z-index和不透明度都正确，还需要进行一些测试。

提供一个JSFIDLE来复制您的问题这里有相同的JSFIDLE：在这里，您将看到密码的默认值是abcdef，因此当您尝试通过使用鼠标和ctrl+c从密码字段复制时，您将获得实际值abcdef..但是没有很好的用户体验感谢这个令人敬畏的答案，这正是我想要的。我理解并尝试了上面的代码片段。它运行得非常好。除了你在最后提到的问题，在选择时没有保留焦点，并且为此你给出了一些实施建议。因此，根据你的解决方案，我必须创建另一个与我的密码字段和密码字段中的值类似的****字符的字段使用某些css属性，我必须显示选定的测试，并且当用户完成selec文本时，需要将此元素与原始passwd字段重叠。我是否对此进行了更正？同样根据您提供的链接，甚至我在IE浏览器中尝试了指针事件属性，但该属性在该浏览器中不起作用，我正在尝试为此寻找其他选项问题..如果你已经在IE中找到了适合你的解决方案，那么这对我来说将是一个奖励..无论如何，谢谢..我真的很喜欢jquery插件，也许将来我也应该用这种方法解决问题是的，我想你还没有尝试过，你需要在隐藏字段下面放置一个div，一旦select事件运行，将在密码字段上方显示，并在重置时再次隐藏它。至于指针事件：可以简单地使用z-index:-1而不是指针事件none，并在指针事件：auto时重置它。如果z索引不起作用，您也可以看看这个问题：