'keyup/keydown' not working as events. Has happened before too

help
1

I am not able to make the ‘keyup’ etc. events to work, on a template basis. It only works by attaching a callback to the ‘document’ in ‘Template.onCreated()’; as described here: https://stackoverflow.com/questions/27972873/meteor-keydown-keyup-events-outside-input

This has also happened before and also fixed before. Here: https://github.com/meteor/meteor/issues/2024

Or is the bug still there. The Docs talk about using ‘keyup’/‘keydown’ easily for capturing arrow keys.

What is the latest update on this? & how should we deal with this.

2

Do you have a code sample?

3

The code was too obvious so I didn’t add it. Here it is:

Body:

<head>
  <title>sampleKeyup</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> eventTest}}

</body>


<template name="eventTest" id="test">

  <h1>Event Test for KeyUP/KeyDown</h1>

  <h2>First Test</h2>

  <p>Some Text Here</p>

  <p>Some Text Here</p>

  <p>Some Text Here</p>

  <p>Some Text Here</p>

  <p>Some Text Here</p>

  <p>Some Text Here</p>

  <p>Some Text Here</p>

  <p>Some Text Here</p>

</template>

Events/Helpers:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';



Template.hello.events({
  'click #test'(event, instance) {
    // increment the counter when button is clicked
    console.log(event);
    console.log("click registered");
    ;
  },

  'keyup'(event, instance) {
    // increment the counter when button is clicked
    console.log(event);
    console.log("keyup registered");
    ;
  }
});

I have tried all possible combinations by including/excluding the template id (#test). Using old/new syntax for declaring event handlers etc. Adding body beside click/keyup: ‘click body’/‘keyup body’.

It doesn’t work. The console remains mum.

The problem has happened before. Others have reported, as there in the links.

A solution has also been suggested as there in the second link. It works for the time being.

Pls. help everyone.

4

I forgot to add, that, the events works with ‘click’ on the ‘button’, & ‘keyup’ in ‘input’ etc. This has also been told 2 yrs. back in the above links.

5

Okay, so you have the wrong template name in your handler, you are using “Template.hello.events”, when it should be “Template.eventTest.events”.

“click #test” this has the selector #test, which is not an element, (but a template…?), and certainly not a button.

“keyup” is missing a selector.

There are no buttons here at all in fact.

6

Ooops! Terribly sorry!

It’s surely not as obvious as it looks. I am surely making a mistake! One of the mistakes I have caught. (below).

I actually had to make a new project to test this, coz my old code had by now expanded a lot.

I made an error!

Everyone pls. help.

Here is the new VALID code:

<head>
  <title>sampleKeyup</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> eventTest}}

</body>


<template name="eventTest" id="test">

  <div class="checkKeyUp">
    <h1>Event Test for KeyUP/KeyDown</h1>

    <h2>First Test</h2>

    <div class="checkClick">
      <p>Some Text Here</p>

      <p>Some Text Here</p>

      <p>Some Text Here</p>

      <p>Some Text Here</p>

      <p>Some Text Here</p>

      <p>Some Text Here</p>

    </div>

    <p>Some Text Here</p>

    <p>Some Text Here</p>

  </div>


</template>

And handlers:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';



Template.eventTest.events({
  'click'(event, instance) {
    // increment the counter when button is clicked
    console.log(event);
    console.log("click registered");
    ;
  },

  'keyup div'(event, instance) {
    // increment the counter when button is clicked
    console.log(event);
    console.log("keyup registered");
    ;
  }
});

I am very happy to report that ‘click’ is working on ‘div’ or ‘p’, …

'click div'

or,

'click p'

… & even without an element as in the code above. But as it should, it’s only working inside the template. Which is great!

‘keyup’ is not working any which way:

'keyup div'

'keyup p'

or plain:

'keyup'

WHAT am I doing wrong? Is this the correct way to use ‘keyup’?

Pls. help everyone.

And many many thanks for ur help.

Summer Greetings from India.

7

For the “keyup” event to trigger, the event target must be an input element that can be typed in.
It will not work with ‘p’ and ‘div’ since you cannot type in there.
Try with an input element.

8

How do we capture the ‘keyup’/‘keydown’ events outside of element. Say on the page.

How do we capture arrow keys?? Is there any way apart from the links at the top?

9

Thought I’d document a simple fix for this:

Template.test_keyup.onRendered(function() {
    const template = this
    document.body.onkeyup = function (evt) {
        console.log(evt)
        switch(evt.key) {
          case 'ArrowDown': ...
        }
    }
})