我们如何模拟 Ctrl - 使用 Javascript 缩小?样式缩放属性或转换属性似乎缩小了,但不同,角落中有空白,不像浏览器上典型的 Ctrl - 缩小的样子。
通过Javascript,我尝试了KeyboardEvent,但它没有解决问题
var event = new KeyboardEvent("keypress", {key:"-", code:45 ,ctrlKey:true});
document.body.dispatchEvent(event);
谢谢。
我不确定你是否开始使用Javascript,所以我也会在这里为你留下一个CSS选项。CSS有一个适当的辅助功能,称为缩放,它将完成您的要求。
div {
zoom: 200%
}
不过,就实际模拟按钮按下而言,请尝试此操作;
var event = jQuery.Event("keydown");
event.which = 107; // Key code for +
event.ctrlkey = true;
$(document).trigger(event);
您误用了键属性。例如,请改用这个:
var event = new KeyboardEvent('keydown', { key: 'Minus' });
这是指向KeyboardEvent.key
的值列表的链接。
试试这个:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="text-align: center;">
<h1>Result</h1>
<button>Trigger Ctrl and - Keypress</button>
</div>
<script>
let btn = document.querySelector("button");
let result = document.querySelector("h1");
// Normally keyboard pressed event
document.body.addEventListener("keydown", (e) => {
if (e.keyCode == 189 && e.ctrlKey) {
result.innerText = "Ctrl Key and - key Pressed";
ps();
}
});
// Button event
btn.addEventListener("click", () => {
const keyEvent = new KeyboardEvent("keydown", {
ctrlKey: true,
keyCode: 189
});
document.body.dispatchEvent(keyEvent);
ps();
});
const ps = () => {
// back to previous state
setTimeout(() => {
result.innerHTML = "Result";
}, 2000);
}
</script>
</body>
</html>