I'm working on a logic that turns the screen black when I press the print screen shot key. I'm changed background color but not working. The console detected a change in value.
What's wrong?
I use typescript and next.js
function App({ Component, pageProps }: AppProps) {
const [value, setValue] = useState(false);
useEffect(()=> {
const keyUpListener = (e:KeyboardEvent) => {
if (e.key === 'PrintScreen' || e.key === 'F13') {
alert('test');
document.body.style.zIndex = '999999';
document.body.style.backgroundColor = 'black';
setValue(v => !v);
}
}
document.addEventListener('keyup', keyUpListener);
return () => document.removeEventListener('keyup', keyUpListener);
}, []);
return <>
<Component {...pageProps} />
</>;
}Maybe try changing the keyup event to keydown to track the key press before it is triggered.
Also remember to unbind your event to avoid memory leaks.
useEffect(() => {
document.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'PrintScreen' || e.key === 'F13') {
alert('test');
document.body.style.zIndex = '999999';
document.body.style.backgroundColor = 'black';
}
})
return () => document.removeEventListener(‘keydown’)
}, [])
It should be something along these terms, didnt test it though.