How to prevent submitting a form on pressing enter and still have the key being registered?

JavaScript
1

I’m creating a firefox extension that shows when watching youtube videos. It’s just a form where I write notes and push them to a database.

When I submit the form, the content goes to my database (taking notes whilst watching videos). But, if I press the backslash I want to pause the video but not have the backslash show up, and on the playrate input field I want to type a number hit enter and the form not to act.

Thel event.preventDefault(); is the obvious solution but it seems to prevent later behaviors.

<form>
 <p><input type="text" placeholder="id" disabled id="editor_id" /></p>
 <textarea name="" class="editor" id="editor" cols="30" rows="10"></textarea>
 <p><input type="text" placeholder="video play rate" id="playrate" /></p>
 <p><button type="submit" id="formSubmit" style="width: 100%;">submit</button></p>
</form>

function videoPlayRateControl() {
  function keyDown(selector, func) {
    document.querySelector(selector).addEventListener("keydown", func);
  }
  const keys = {
    backspace: 8,
    tab: 9,
    enter: 13,
    shift: 16,
    backslash: 220,
  };
  // E
  keyDown("#playrate", function (event) {
    if (event.keyCode === keys.backslash) {
      browser.tabs.query(
        { active: true, currentWindow: true },
        function (tabs) {
          browser.tabs.sendMessage(tabs[0].id, {
            type: "videoStartStop",
          });
        }
      );
    }
    if (event.keyCode === keys.enter) {
      // send the playRate message to the content script
      event.preventDefault();
      browser.tabs.query(
        { active: true, currentWindow: true },
        function (tabs) {
          browser.tabs.sendMessage(tabs[0].id, {
            type: "playRate",
            message: event.target.value,
          });
        }
      );
    }
  });
}

Without event.preventDefault(); it doesn’t work, with it, the backslash effect is … prevented from taking effect

Steps:

  1. I hit backslash - works: video pauses.
  2. I hit backslash again - works: video starts.
  3. I type a number and hit enter: works, video speeds
  4. I type another number and hit enter: works, video speeds
  5. I try to repeat step one - does not work
3

Did you try just putting in some console.log statements in place of both your browser.tabs.query locations and see if the events are triggering the right if statements? Second to that, is event.target.value coming out as what you expect?

In situations like this, I look to comment out some lines, put in a few console.logs in their place and re-evaluate if the flow is working as I think it is working. Because I don’t see how event.preventDefault() would be carried over into another key down event like I think you are saying it does. My limited tests show no issue, but then again I am not running the whole browser.tabs deal inside an extension.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.