使用 Javascript 模拟 (Ctrl ) + (-) 缩小事件



我们如何模拟 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>

最新更新