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

2020/10/22 23:42 · javascript ·  · 0评论

如何使用Javascript检测ctrl+ vctrl+ c

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

如何实现呢?

我只是出于兴趣而这样做。我同意这是不正确的事情,但我认为它应该是OP的决定......另外,代码可以很容易地扩展到增加功能,而不是把它拿走(如更先进的剪贴板,或Ctrl+s触发服务器-端保存)。

$(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库。

Codepen示范

编辑:由于蒂姆·唐纳(Tim Down)的建议,删除了3条多余的线(涉及e.which)(请参阅评论)

编辑:添加了对Macs的支持(用cmd键代替ctrl

使用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/

虽然将其用作反盗版措施可能会令人讨厌,但我可以看到在某些情况下它是合法的,因此:

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永远不会触发“向下”和“向上”事件,因此唯一的检测方法是event.ctrlKeyCtrl键为按住。我也ctrlKeymetaKeyMac代替

此方法的局限性:

  • Opera不允许禁用右键单击事件

  • 据我所知,无法阻止浏览器窗口之间的拖放。

  • 例如Firefox中edit->copy菜单项仍然可以允许复制/粘贴。

  • 对于具有不同键盘布局/语言环境的人,也不能保证复制/粘贴/剪切的键码相同(尽管布局通常遵循与英语相同的标准),但是总括的“禁用所有控制键”意味着选择全部等。也会被禁用,所以我认为这是一个折衷方案。

有这样做的另一种方法: onpasteoncopyoncut事件可以注册并在IE,火狐,Chrome,Safari浏览器取消了(有一些小问题),唯一的主要的浏览器不允许取消这些活动是Opera。

如您在其他答案中所见,拦截Ctrl+vCtrl+c具有许多副作用,并且仍然不能阻止用户使用FirefoxEdit菜单等进行粘贴

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使用此方法仍存在一些小问题(防止默认设置时,它会清除剪贴板中的剪切/复制内容),但该错误现在似乎已在Chrome中修复。

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

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

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

}); 

防止用户使用上下文菜单,在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;
}

如果使用该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.
      } 
    }

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

通常,请谨慎进行此类更改。我为客户端编写了插件,因为没有其他解决方案。

您可以使用此代码进行右键单击,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();
    });

代替onkeypress,使用onkeydown。

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

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

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

另请参见jquery:keypress,ctrl + c(或类似的组合)

别忘了,尽管您可以检测并阻止Ctrl+ C/ V,但是仍然可以更改某个字段的值。

最好的示例是Chrome的Inspect Element函数,它使您可以更改字段的值属性。

我已经遇到了您的问题,并通过以下代码解决了它..仅接受数字

$('#<%= 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;
            }
        });

你可以检测到CtrlIDe.which == 17

允许覆盖复制事件的钩子可以用于粘贴事件。输入元素无法显示:无;或可见性:隐藏;可悲的是

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时,它将重新聚焦并在复制时调用您的自定义事件。

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

重要的提示

我使用e.keyCode了一段时间,并检测到当我按ctrl+时.,此属性返回错误的数字190,而ASCII码.为46!

因此,您应该使用e.key.toUpperCase().charCodeAt(0)而不是e.keyCode

有一些预防方法。

但是,用户将始终可以关闭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怎么说,这些功能都取决于浏览器。

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptjiancectrl-vctrl-c.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!