javascript how to block space bar

Question

I'm building an app, where I want to block the space bar from scrolling my page

I'm using VUE and I'm calling method using event handler

But calling keymonitor method throws me error:

Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

Do you know how to correctly call 'keymonitor' method?

window.addEventListener('keydown', e => {
  return this.keymonitor(e)
})


keymonitor(event) {
  if (this.sendkey === 1) {
    if (event.key.length === 1) {
      this.keyDown = {
        cmd: 'keyboard',
        key: event.key,
      }
    } else if (
      event.key === 'Enter' ||
      event.key === 'Tab' ||
      event.key === 'PageUp' ||
      event.key === 'PageDown' ||
      event.key === 'End' ||
      event.key === 'Home' ||
      event.key === 'ArrowLeft' ||
      event.key === 'ArrowUp' ||
      event.key === 'ArrowRight' ||
      event.key === 'ArrowDown' ||
      event.key === 'Backspace' ||
      event.key === 'Delete' ||
      event.key === 'Escape'
    ) {
      this.keyDown = {
        cmd: 'keyboardSpecial',
        key: event.key,
      }
      // event.preventDefault();
    }
    console.log('eventkey: ')
    console.log(this.keyDown)
    this.sendMessage(this.keyDown)
  }
  if (event.which === 32) {
    console.log('SPACE')
  }
  return false
},

It might be asking you to do this: `window.addEventListener('keydown', e => this.keymonitor(e))` — TKoL, Jun 07 '21 at 11:27

score 1 · Accepted Answer · answered Jun 07 '21 at 11:29

Try below code instead - I am not too happy with the this here

const keymonitor = event => {
  if (this.sendkey === 1) {
    if (event.key.length === 1) {
      this.keyDown = {
        cmd: 'keyboard',
        key: event.key,
      }
    } else if (
      event.key === 'Enter' ||
      event.key === 'Tab' ||
      event.key === 'PageUp' ||
      event.key === 'PageDown' ||
      event.key === 'End' ||
      event.key === 'Home' ||
      event.key === 'ArrowLeft' ||
      event.key === 'ArrowUp' ||
      event.key === 'ArrowRight' ||
      event.key === 'ArrowDown' ||
      event.key === 'Backspace' ||
      event.key === 'Delete' ||
      event.key === 'Escape'
    ) {
      this.keyDown = {
        cmd: 'keyboardSpecial',
        key: event.key,
      }
      // event.preventDefault();
    }
    console.log('eventkey: ')
    console.log(this.keyDown)
    this.sendMessage(this.keyDown)
  }
  if (event.which === 32) {
    console.log('SPACE')
    event.preventDefault()
  }
  return false
}

window.addEventListener('keydown', keymonitor)

I've changed calling method as you've showed, but it seems, that "return false" doesn't works, because spacebar still scroll my page. Do you know why? — Ilkar, Jun 07 '21 at 11:39
event.preventDefault() works perfect. How to disable it if i will need to? — Ilkar, Jun 07 '21 at 11:54
Use a toggle `if (disableSpace) event.preventDefault()` and set disableSpace somewhere — mplungjan, Jun 07 '21 at 11:56

Marijn Berends · Answer 2 · 2021-06-07T11:43:47.260

0

window.addEventListener("keydown", keymonitor);

Keymonitor will automatically get the event as a parameter if you define it as a param in the function, which you did

Make sure to add the window.addEvenListener after the function keymonitor. Otherwise it'll be out of scope. Since it won't exist yet.

To actually prevent a key from working:

if (event.which === 32) {
    console.log('SPACE')
    event.preventDefault();
  }

return false;

edited Jun 07 '21 at 11:43

answered Jun 07 '21 at 11:31

Marijn Berends

203
1
7

i did it, but somehow spacebar still works (scroll page), what means that "return false" doesn't works. Do you know why? – Ilkar Jun 07 '21 at 11:38
@mplungjan I was just answering the question that was asked in the comments. Didn't even look at your post... I can't help it that that's the way it's done in Javascript – Marijn Berends Jun 07 '21 at 12:28
It is always useful to reload and read other answers before adding stuff. You never know if the answer you are about to write is identical to someone else's and can be deleted – mplungjan Jun 07 '21 at 13:30
That's a learning point for me. Will do that for sure next time :) – Marijn Berends Jun 08 '21 at 06:56

score 0 · Answer 3 · answered Jun 07 '21 at 11:58

I have created a simplified working example for you, inspired by HTML prevent space bar from scrolling page.

new Vue({
  el: '#app',
  created() {
    window.addEventListener('keydown', e => {
      if (e.keyCode == 32 && e.target == document.body) {
        alert('prevented spacebar on body');
        e.preventDefault();
      }
    })
  }
});

body {
  height: 100000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input />
  <textarea></textarea>
</div>

javascript how to block space bar

3 Answers3