1

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

我按照这篇文章屏蔽文本，但仍然允许用户复制它并创建另一个不透明度为 0.001 的 input[type=text] 字段并调整此字段，使其与密码字段重叠

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

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

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

谢谢，院长

4

1 回答 1

0

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

无论如何，这是我能想到的最好的。它使用jQuery-textrange 插件来处理跨浏览器的文本选择。它也需要相当新的版本。jsfiddle 演示。

主要思想是让低不透明度字段忽略鼠标事件，这样用户就可以正常选择密码字段中的文本。优点是我们根本不需要处理选择渲染。这可以通过 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 系统颜色突出显示选定的字符。z-index但是，要使opacity他们每个人都正确，将需要进行一些测试。

于 2013-08-08T15:54:34.120 回答