Draggable Virtual Keyboard
Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/589289/1889735/Virtual%20WASD%20Keyboard.js
// ==UserScript==
// @name Virtual WASD Keyboard
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Draggable Virtual Keyboard
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
const panel = document.createElement("div");
panel.id = "vk-panel";
panel.innerHTML = `
<div id="dragBar">⌨ Virtual Keyboard</div>
<div class="row">
<button data-key="KeyW">W</button>
</div>
<div class="row">
<button data-key="KeyA">A</button>
<button data-key="KeyS">S</button>
<button data-key="KeyD">D</button>
</div>
<div class="row">
<button class="space" data-key="Space">SPACE</button>
</div>
`;
document.body.appendChild(panel);
const style = document.createElement("style");
style.textContent = `
#vk-panel{
position:fixed;
left:20px;
bottom:20px;
width:220px;
background:#111;
border:2px solid cyan;
border-radius:15px;
box-shadow:0 0 20px cyan;
z-index:999999;
font-family:sans-serif;
user-select:none;
}
#dragBar{
padding:8px;
background:#222;
color:white;
cursor:move;
text-align:center;
font-weight:bold;
border-radius:12px 12px 0 0;
}
.row{
display:flex;
justify-content:center;
margin:6px;
gap:6px;
}
button{
width:55px;
height:55px;
font-size:20px;
font-weight:bold;
border:none;
border-radius:10px;
background:#222;
color:white;
cursor:pointer;
transition:.2s;
}
button:hover{
background:#0ff;
color:black;
box-shadow:0 0 15px cyan;
}
button:active{
transform:scale(.9);
}
.space{
width:180px;
}
`;
document.head.appendChild(style);
function send(type, code) {
document.dispatchEvent(new KeyboardEvent(type, {
code,
key: code === "Space" ? " " : code.replace("Key",""),
bubbles: true
}));
}
panel.querySelectorAll("button[data-key]").forEach(btn=>{
btn.addEventListener("mousedown",()=>{
send("keydown",btn.dataset.key);
});
btn.addEventListener("mouseup",()=>{
send("keyup",btn.dataset.key);
});
btn.addEventListener("mouseleave",()=>{
send("keyup",btn.dataset.key);
});
btn.addEventListener("touchstart",(e)=>{
e.preventDefault();
send("keydown",btn.dataset.key);
});
btn.addEventListener("touchend",(e)=>{
e.preventDefault();
send("keyup",btn.dataset.key);
});
});
// Drag
let dragging=false,offsetX=0,offsetY=0;
const bar=document.getElementById("dragBar");
bar.onmousedown=e=>{
dragging=true;
offsetX=e.clientX-panel.offsetLeft;
offsetY=e.clientY-panel.offsetTop;
};
document.onmousemove=e=>{
if(!dragging)return;
panel.style.left=(e.clientX-offsetX)+"px";
panel.style.top=(e.clientY-offsetY)+"px";
panel.style.bottom="auto";
};
document.onmouseup=()=>{
dragging=false;
};
})();