如何检测Ctrl+V, Ctrl+C使用JavaScript?

如何检测Ctrl+VCtrl+C使用JavaScript?

我需要限制粘贴在我的文本区域,最终用户不应该复制和粘贴内容,用户应该只在文本区域输入文本。

我怎样才能做到这一点呢?

320457 次浏览

您可以监听按键事件,如果它与特定的按键代码匹配,就停止默认事件(输入文本)

我写了一个jQuery插件,它可以捕捉击键。它可以在没有操作系统的情况下在html表单中启用多语言脚本输入(字体除外)。它大约有300行代码,也许你想看一下:

一般来说,这样的改动要小心。因为没有其他解决方案,所以我为客户端编写了这个插件。

有一些方法可以预防。

然而,用户将始终能够关闭javascript或只查看页面的源代码。

一些例子(需要jQuery)

/**
* Stop every keystroke with ctrl key pressed
*/
$(".textbox").keydown(function(){
if (event.ctrlKey==true) {
return false;
}
});


/**
* Clear all data of clipboard on focus
*/
$(".textbox").focus(function(){
if ( window.clipboardData ) {
window.clipboardData.setData('text','');
}
});


/**
* Block the paste event
*/
$(".textbox").bind('paste',function(e){return false;});

编辑:Tim Down说,这些函数都依赖于浏览器。

我这么做只是出于兴趣。我同意这样做不对,但我认为这应该由医生决定。此外,代码可以很容易地扩展以添加功能,而不是将其删除(如更高级的剪贴板,或Ctrl+年代触发服务器端保存)。

$(document).ready(function() {
var ctrlDown = false,
ctrlKey = 17,
cmdKey = 91,
vKey = 86,
cKey = 67;


$(document).keydown(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
}).keyup(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
});


$(".no-copy-paste").keydown(function(e) {
if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false;
});
    

// Document Ctrl + C/V
$(document).keydown(function(e) {
if (ctrlDown && (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
if (ctrlDown && (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea>

还要说明一下,这个脚本需要jQuery库。

< a href = " http://codepen。/a> . io/jackocnr/pen/ezBKVQ" rel="noreferrer"> code depen demo . io/jackocnr/pen/ezBKVQ" rel="noreferrer">

编辑:由于Tim Down的建议,删除了3个多余的行(包括e.which)(见评论)

编辑:增加了对mac的支持(cmd键代替ctrl键)

虽然作为一种反盗版措施可能会令人恼火,但我认为在某些情况下它是合法的,所以:

function disableCopyPaste(elm) {
// Disable cut/copy/paste key events
elm.onkeydown = interceptKeys


// Disable right click events
elm.oncontextmenu = function() {
return false
}
}


function interceptKeys(evt) {
evt = evt||window.event // IE support
var c = evt.keyCode
var ctrlDown = evt.ctrlKey||evt.metaKey // Mac support


// Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
if (ctrlDown && evt.altKey) return true


// Check for ctrl+c, v and x
else if (ctrlDown && c==67) return false // c
else if (ctrlDown && c==86) return false // v
else if (ctrlDown && c==88) return false // x


// Otherwise allow
return true
}

我使用event.ctrlKey而不是检查键代码,因为在Mac OS X上的大多数浏览器上Ctrl/Alt“down”和“up”事件从未触发,所以检测的唯一方法是在Ctrl键按下后在例如c事件中使用event.ctrlKey。我还用metaKey替换了mac的ctrlKey

该方法的局限性:

  • Opera不允许禁用右击事件

  • 据我所知,浏览器窗口之间的拖放是无法阻止的
  • 例如,Firefox中的edit->copy菜单项仍然可以允许复制/粘贴
  • 对于拥有不同键盘布局/locale的人来说,复制/粘贴/剪切的键代码也不一定相同(尽管布局通常遵循与英语相同的标准),但是“禁用所有控制键”意味着select all etc也将被禁用,所以我认为这是需要做出的妥协。

我已经有你的问题,我解决了以下代码..只接受数字

$('#<%= mobileTextBox.ClientID %>').keydown(function(e) {
///// e.which Values
// 8  : BackSpace , 46 : Delete , 37 : Left , 39 : Rigth , 144: Num Lock
if (e.which != 8 && e.which != 46 && e.which != 37 && e.which != 39 && e.which != 144
&& (e.which < 96 || e.which > 105 )) {
return false;
}
});

你可以检测到Ctrl id e.which == 17

还有另一种方法: onpasteoncopyoncut事件可以在IE, Firefox, Chrome, Safari中注册和取消(有一些小问题),唯一不允许取消这些事件的主要浏览器是Opera。

正如你在我的另一个答案中看到的那样,截取Ctrl+vCtrl+c会带来许多副作用,而且它仍然不能阻止用户使用Firefox Edit菜单等进行粘贴。

function disable_cutcopypaste(e) {
var fn = function(evt) {
// IE-specific lines
evt = evt||window.event
evt.returnValue = false


// Other browser support
if (evt.preventDefault)
evt.preventDefault()
return false
}
e.onbeforepaste = e.onbeforecopy = e.onbeforecut = fn
e.onpaste = e.oncopy = e.oncut = fn
}

Safari在这个方法上仍然有一些小问题(它在防止默认时清除剪贴板而不是剪切/复制),但这个bug现在在Chrome中似乎已经修复了。

参见: http://www.quirksmode.org/dom/events/cutcopypaste.html和相关的测试页面http://www.quirksmode.org/dom/events/tests/cutcopypaste.html获取更多信息。

使用jquery,你可以通过绑定函数轻松检测复制,粘贴等:

$("#textA").bind('copy', function() {
$('span').text('copy behaviour detected!')
});
$("#textA").bind('paste', function() {
$('span').text('paste behaviour detected!')
});
$("#textA").bind('cut', function() {
$('span').text('cut behaviour detected!')
});

更多信息:http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

现场演示 http://jsfiddle.net/abdennour/ba54W/ < / p >

$(document).ready(function() {


$("#textA").bind({
copy : function(){
$('span').text('copy behaviour detected!');
},
paste : function(){
$('span').text('paste behaviour detected!');
},
cut : function(){
$('span').text('cut behaviour detected!');
}
});


});

使用onkeydown代替onkeypress。

<input type="text" onkeydown="if(event.ctrlKey && event.keyCode==86){return false;}" name="txt">

不要忘记,虽然你可能能够检测和阻止Ctrl+C/V,但你仍然可以改变某个字段的值 最好的例子是Chrome的Inspect Element函数,它允许你改变一个字段的值属性

简短的解决方案,防止用户使用上下文菜单,复制和裁剪在jQuery:

jQuery(document).bind("cut copy contextmenu",function(e){
e.preventDefault();
});

此外,在CSS中禁用文本选择可能会派上用场:

.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

你可以使用此代码右击,CTRL+CCTRL+VCTRL+X检测和阻止他们的行为

$(document).bind('copy', function(e) {
alert('Copy is not allowed !!!');
e.preventDefault();
});
$(document).bind('paste', function() {
alert('Paste is not allowed !!!');
e.preventDefault();
});
$(document).bind('cut', function() {
alert('Cut  is not allowed !!!');
e.preventDefault();
});
$(document).bind('contextmenu', function(e) {
alert('Right Click  is not allowed !!!');
e.preventDefault();
});

另一种方法(不需要插件)是只使用传入的事件对象ctrlKey属性。它指示在事件发生时是否按下了Ctrl,如下所示:

$(document).keypress("c",function(e) {
if(e.ctrlKey)
alert("Ctrl+C was pressed!!");
});

另见Jquery:按下键盘,ctrl+c(或类似的组合)

如果你使用ctrlKey属性,你不需要维护状态。

   $(document).keydown(function(event) {
// Ctrl+C or Cmd+C pressed?
if ((event.ctrlKey || event.metaKey) && event.keyCode == 67) {
// Do stuff.
}


// Ctrl+V or Cmd+V pressed?
if ((event.ctrlKey || event.metaKey) && event.keyCode == 86) {
// Do stuff.
}


// Ctrl+X or Cmd+X pressed?
if ((event.ctrlKey || event.metaKey) && event.keyCode == 88) {
// Do stuff.
}
}

重要提示

我使用了e.keyCode一段时间,我发现当我按ctrl + 时,这个属性返回了一个错误的数字190,而.的ascii码是46!

所以你应该使用 e.key.toUpperCase().charCodeAt(0)而不是e.keyCode

$(document).keydown(function(event) {
let keyCode = e.key.toUpperCase().charCodeAt(0);
  

...
}

允许重写复制事件的钩子也可以用于对粘贴事件做同样的事情。输入元素不能显示:none;或者可见性:隐藏;可悲的是

export const useOverrideCopy = () => {
const [copyListenerEl, setCopyListenerEl] = React.useState(
null as HTMLInputElement | null
)
const [, setCopyHandler] = React.useState<(e: ClipboardEvent) => void | null>(
() => () => {}
)
// appends a input element to the DOM, that will be focused.
// when using copy/paste etc, it will target focused elements
React.useEffect(() => {
const el = document.createElement("input")
// cannot focus a element that is not "visible" aka cannot use display: none or visibility: hidden
el.style.width = "0"
el.style.height = "0"
el.style.opacity = "0"
el.style.position = "fixed"
el.style.top = "-20px"
document.body.appendChild(el)
setCopyListenerEl(el)
return () => {
document.body.removeChild(el)
}
}, [])
// adds a event listener for copying, and removes the old one
const overrideCopy = (newOverrideAction: () => any) => {
setCopyHandler((prevCopyHandler: (e: ClipboardEvent) => void) => {
const copyHandler = (e: ClipboardEvent) => {
e.preventDefault()
newOverrideAction()
}
copyListenerEl?.removeEventListener("copy", prevCopyHandler)
copyListenerEl?.addEventListener("copy", copyHandler)
copyListenerEl?.focus() // when focused, all copy events will trigger listener above
return copyHandler
})
}
return { overrideCopy }
}

这样用:

const customCopyEvent = () => {
console.log("doing something")
}
const { overrideCopy } = useOverrideCopy()
overrideCopy(customCopyEvent)

每次调用overrideCopy时,它都会重新聚焦并在copy上调用自定义事件。

如果有人对简单的JavaScript方法感兴趣,请参阅下面。

小提琴链接:演示

      let ctrlActive = false;
let cActive = false;
let vActive = false


document.body.addEventListener('keyup', event => {
if (event.key == 'Control') ctrlActive = false;
if (event.code == 'KeyC') cActive = false;
if (event.code == 'KeyV') vActive = false;
})


document.body.addEventListener('keydown', event => {
if (event.key == 'Control') ctrlActive = true;
if (ctrlActive == true && event.code == 'KeyC') {


// this disables the browsers default copy functionality
event.preventDefault()


// perform desired action(s) here...
console.log('The CTRL key and the C key are being pressed simultaneously.')


}


if (ctrlActive == true && event.code == 'KeyV') {


// this disables the browsers default paste functionality
event.preventDefault()


// perform desired action(s) here...
console.log('The CTRL key and the V key are being pressed simultaneously.')


}


})

上面的代码将禁用浏览器中的默认copy。如果你想在浏览器中保留复制功能,只需注释掉这一点:event.preventDefault(),然后你可以在允许用户复制内容的同时运行任何想要的操作。

使用Jquery的另一个简单方法:

$(document).keydown( function(e)
{
if (e.ctrlKey && e.key == 'c')
{
console.log('got ctrl c');
}
else if (e.ctrlKey && e.key == 'v')
{
console.log('got ctrl v');
}
});
element.addEventListener('keydown', function (e) {
if (e.key == 'c' && e.ctrlKey) {
e.preventDefault(); // prevent from copying
}
if (e.key == 'v' && e.ctrlKey) {
e.preventDefault(); // prevent from pasting
}
}