Search code examples
javascripthtmlmeteor

Meteor Blaze tab key event

This Meteor code does not print to console the event.which so as to use tab key event when tabbing out of an editable div. Why editable div? Because I can style part of the string which is not allowed in input element.

BTW: Where do I find a list of the events types for Meteor Blaze. There site only lists a very limited events. Other DOM events are available as well, but...

I tried some blur and onblur for no avail. How can I fire a tab key event on an editable div? Thanks

//client/main.js template evnet

  'onblur #vin'(e){
    console.log(e.which)  //prints nothing
    let vin = e.target.value

  }
  
    <div class="body">
      <div id="vin" class="editable" contenteditable="true">{{vehicle.vin_a}}<span id="vinb">{{vehicle.vin_b}}</span><span id="vin4">{{vehicle.vin4}}</span></div>
      <input type="text" placeholder="make, modle, date">
    </div>

Solution

  • It works for me!

    Here is a minimal, reproducible example:

    main.html:

    <head>
  <title>b</title>
</head>

<body>
  {{> info}}
</body>

<template name="info">
  <div id="vin" class="editable" contenteditable="true">
    Edit me
  </div>
</template>

    main.js:

    import { Template } from 'meteor/templating';

import './main.html';

Template.info.events({
  'blur #vin'(event, instance) {
    console.log('blur!', event);
  }
});

    Maybe you defined the event on the wrong template?