1

I'm using Firefox 65.0 for my web development. My project code contains password input. I developed this before more than a year ago using JS code that detects the key presses using onkeydown and onkeyup functions. It works fine for all browsers except the new Firefox version 65.0

My code is similar to this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=password id="button" autocomplete_="off"></input>

<script>
  $("#button").keydown(function(event) {
    console.log("key: " + event.key);
  });

  document.getElementById("button").onkeydown = function(event) {
    console.log("key: " + event.key);
  };
</script>

For both cases the event.key value is not the pressed button, but it's just "Process" as a string. Does someone have an idea why I get this result? How can I solve it and detect the real pressed key value?

My OS version: is ubuntu 18.04

Edit: add debug screen shot

In addition I can't find any attribute under event that can help me

you can find below a screen shot of a debug in the onkeydown handler for the case of 'a' key.

enter image description here

Kallel Omar
  • 1,208
  • 2
  • 17
  • 51

1 Answers1

1

There are quite a few different event properties for key codes, and they all return something a little bit different. Try event.which, and if that doesn't work, here's a list of other event properties

Edited to provide additional info

I did some testing, the cause appears to be that your trying to log keypresses on an input of type="password". I tested your code snippet in Firefox after removing the type="password" and both event.which and event.key work normally. I suppose its intentionally obfuscated by Firefox to avoid scripts logging password keystrokes. If you need the value of the password, use event.target.value in the event listener. Also I would recommend using the 'keyup' event rather than keydown, or you run into the problem of the listener repeatedly firing when you hold down a key.

With the password attribute

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="button" autocomplete_="off"></input>

<script>  
  // Either remove the password type on your button, or access the event.target.value property and slice out the last keypress
  document.querySelector("#button").addEventListener('keyup', (event) => {
   console.log(`Which: ${event.which}, Key: ${event.key}`);
    console.log(`Value: ${event.target.value}`);
  });
</script>

Without the password attribute

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" autocomplete_="off"></input>

<script>  
  // Either remove the password type on your button, or access the event.target.value property and slice out the last keypress
  document.querySelector("#button").addEventListener('keyup', (event) => {
   console.log(`Which: ${event.which}, Key: ${event.key}`);
    //console.log(`Value: ${event.target.value}`);
  });
</script>
Drowsy
  • 313
  • 1
  • 10