!DOCTYPE html html head title键盘事件/title /head body style="text-align: center;" onkeydown="return cellkeydown(event)" h1键盘事件/h1 textarea id="textArea" /textarea p id="demo1"/p p id="demo2"/p p id="demo3"/p div id="div"2222222
<html>
<head>
<title>键盘事件</title>
</head>
<body style="text-align: center;" onkeydown="return cellkeydown(event)">
<h1>键盘事件</h1>
<textarea id="textArea" ></textarea>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<div id="div">222222222222222222</div>
<input id="output" type="text"/>
<button id="paste">粘贴</button>
</body>
<!-- <script type="text/javascript" src="jquery-3.6.0.js"></script> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
function cellkeydown(event) {
if (event.ctrlKey && event.keyCode == 86) {
var ss = document.getElementById("textArea");
ss.focus();
ss.select();
// 等50毫秒，keyPress事件发生了再去处理数据
setTimeout("dealwithData()", 50);
}
}
function dealwithData(event) {
var ss = document.getElementById("textArea");
alert(ss.value);
ss.blur();
}
function paste() {
var isCopy = false; //判断是否能执行'复制粘贴（新增）节点到dom'功能的判断条件,初始为false(不允许 )
$("div").attr("tabindex","0");
$("div").on("focus",function(){
$(this).on("keydown",function(event){
if(event.ctrlKey){
if(event.keyCode == 67){
alert("你使用了Ctrl+C组合件功能！");
event.keyCode = 0;
}
if(event.keyCode == 86){
if(isCopy){
var max = $(this).size()+1;
var addId = "HKFlow_cnode_"+max;
var type = $(this).find("b").attr("class").split("_")[1];
HKPM.addNode(addId,{name: "cnode_"+max, left: 38, top: 28, type: type});//调用增加节点方法函数，默认粘贴到画布左上角
}
}
}
})
})
<!-- navigator.permissions.query({ -->
<!-- name: 'clipboard-read' -->
<!-- }).then(permissionStatus => { -->
<!-- // permissionStatus.state 的值是 'granted'、'denied'、'prompt': -->
<!-- console.log(permissionStatus.state); -->
<!-- }); -->
<!-- setTimeout(async () => { -->
<!-- // 读取剪切板内容 -->
<!-- const text = await navigator.clipboard.readText(); -->
<!-- console.log(text); -->
<!-- }, 2000); -->
<!-- var pasteText = document.querySelector("#output"); -->
<!-- pasteText.focus(); -->
<!-- document.execCommand("paste"); -->
<!-- console.log(pasteText.textContent); -->
<!-- alert('---------'+pasteText.textContent); -->
}
document.querySelector("#paste").addEventListener("click", paste);
//DOM实现
/*事件监听函数说明
addaddEventListener(even，function(),true/false)
第一个参数是事件，例如"click",引号是必须的，不要用on开头，例如"onclick"。
第二个参数是函数，可以传参，例如function(even){代码段}。
第三个参数可选，使用布尔值，决定事件监听顺序（冒泡或者捕获），新手（包括本人）一般不使用
事件冒泡:事件会从最内层的元素开始发生,一直向上传播,直到document对象；
事件捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。
*/
<!-- document.addEventListener("keydown",function(even){ -->
<!-- document.getElementById("demo1").textContent ="按下的键码是：" + even.keyCode; -->
<!-- }); -->
//jQuery实现
/*jQuery方法说明
$(element)选中元素，直接选中或者通过id，类等方法选中
.method()执行方法，具体方法请查询：
https://www.w3school.com.cn/jquery/jquery_reference.asp
*/
<!-- $(document).keydown(function(even){ -->
<!-- $("#demo2").text("按下的键码是：" + even.keyCode); -->
<!-- }) -->
/*特别说明：
document和jquery选中元素后改变文本方式不同： = 和 ()
个人理解是:textContent是元素的一个属性，而text是jquery的一个方法（jquery本质是一个js文件，是一个方便的框架）
*/
</script>
</html>