如何在浏览器中禁用或移除粘贴上下文菜单项
我有一个信用卡网站，我需要创建一个帐户。显然，他们希望他们的账户持有者在所有网站上使用相同的密码，所以当下一次大账户泄露发生时，他们必须支付尽可能多的钱。为此，他们决定在他们的网站上禁用密码字段的剪贴板使用，以阻止他们的帐户持有者使用密码管理器。
对于火狐和IE11用户来说，浏览器上下文菜单中的粘贴菜单项变灰真的很奇怪。对于Chrome用户来说，粘贴和粘贴为纯文本上下文菜单项完全缺失。
我一直在查看他们网站上的标记和JavaScript，发现他们已经向键盘和鼠标事件添加了事件侦听器，以阻止剪贴板访问密码字段，但真正令人费解的是，当用户在浏览器中右键单击输入时，他们如何更改上下文菜单的内容。password字段只是一个输入元素，类型为password。
<input readonly tabindex="51" maxlength="20" style="height: 22px; width: 200px;" class="gwt-PasswordTextBox gwt-PasswordTextBox-readonly gwt-Focus" type="password">我对如何阻止Ctrl-V或通过JavaScript拦截鼠标对字段的粘贴访问并不真正感兴趣。我知道怎么做。我的问题是，它们如何更改浏览器上下文菜单的内容。请参阅我的答案中的概念证明，了解为什么这个问题与其他问题不同。
回答 2
Stack Overflow用户
发布于 2016-03-25 23:43:39
这实际上不应该是一个调整上下文菜单的问题(除非这是一个设计规范。对于您而言)，但您只需禁用粘贴功能。
这个例子展示了如何对一个给定的元素“终止”粘贴。请记住，它仍然会在上下文菜单上显示粘贴，但该行为不会在第一个密码字段中工作：
window.addEventListener("DOMContentLoaded", function(){
var p1 = document.getElementById("p1");
p1.addEventListener("paste", function(evt){
evt.preventDefault();
evt.stopPropagation();
});
});<input type="password" id="p1" placeholder="Paste won't work in me.">
<input type="password" id="p2" placeholder="Paste will work in me.">
现在，如果您确实需要调整上下文菜单，最好的跨浏览器方法是处理元素上的contextmenu事件，并阻止该事件的默认行为(就像我在代码片段中阻止粘贴行为一样)，然后显示一个预先准备好的、但只是隐藏的对话框。有关更多详细信息，请参阅：http://www.sitepoint.com/building-custom-right-click-context-menu-javascript/
另请参阅：https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu了解有关contextmenu事件的更多信息。
Stack Overflow用户
发布于 2016-03-26 00:21:54
我和另一个同事多看了一下这个。输入中的readonly属性是上下文菜单项缺失的原因。通过添加readonly属性，我能够让username字段显示相同的简化上下文菜单。
显然，它们使用JavaScript事件侦听器截获击键，并将它们传递给这个只读字段，所以这就是您能够输入密码的方式。
这里有一个非常简单的概念证明：
<!DOCTYPE html>
<html>
<head>
<title>Using a Read-only Field as an Input to Overly Control User Experience</title>
<script>
function passAlongKeys(e) {
//debugger;
//TODO handle backspace, delete key, current insertion point etc.
e.currentTarget.value = e.currentTarget.value + e.char;
}
</script>
</head>
<body>
<p>Plain text:<input id="text" type=="text" ></p>
<p>Plain password: <input id="password" type=="password" ></p>
<p>Readonly text: <input id="textro" readonly ></p>
<p>Readonly password:<input type=password id="passwordro" readonly ></p>
<p>Readonly text with JS:<input id="textrojs" type=text onkeydown="passAlongKeys(event)" readonly ></p>
<p>Readonly password with JS:<input id="passwordrojs" type=password onkeydown="passAlongKeys(event)" readonly ></p>
</body>
</html>
https://stackoverflow.com/questions/36222864
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号