Question

我有一个信用卡网站，我需要创建一个帐户。显然，他们希望他们的帐户持有人在所有网站上使用相同的密码，这样他们就必须在下次大帐户违规发生时支付尽可能多的钱。为此，他们决定在其网站上的密码字段中禁用剪贴板使用，以阻止其帐户持有者使用密码管理器。

对于Firefox和IE11用户来说，浏览器上下文菜单中的“粘贴”菜单项是灰色的，这真的很奇怪。对于Chrome用户，完全没有粘贴和粘贴为纯文本上下文菜单项。

我一直在查看他们网站上的标记和JavaScript，看到他们为键盘和鼠标事件添加了事件监听器，以阻止剪贴板访问密码字段，但真正令人困惑的是他们如何管理更改用户右键单击浏览器中输入时显示的上下文菜单的内容。密码字段只是一个密码类型的输入元素。

<input readonly tabindex="51" maxlength="20" style="height: 22px; width: 200px;" class="gwt-PasswordTextBox gwt-PasswordTextBox-readonly gwt-Focus" type="password">

我对如何阻止Ctrl-V或通过JavaScript拦截鼠标对字段的粘贴访问并不感兴趣。我知道该怎么做。我的问题是他们如何改变浏览器的上下文菜单的内容。请参阅我的答案中的概念验证，了解为什么这与其他问题不同。

Answer 1

这不应该是调整上下文菜单的问题（除非这是你的设计规范），而是你只需要禁用粘贴功能。

此示例显示如何“杀死”给定元素的粘贴。请记住，它仍将在上下文菜单中显示粘贴，但行为将无法在第一个密码字段中显示：

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事件的更多信息。

Answer 2

我和另一个在工作的人一起看了这个。输入中的readonly属性是缺少上下文菜单项的原因。我能够通过向其添加readonly属性来获取用户名字段以显示相同的缩小上下文菜单。

显然，他们会通过JavaScript事件监听器拦截击键并将它们传递到此只读字段，以便您可以输入密码。

这是一个非常简化的概念验证：

＆＃13;

<!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>

＆＃13;

如何在浏览器中禁用或删除粘贴上下文菜单项

2 个答案: