How to distinguish key "5" and "%" from keystrokes in jquery?

Question

I want to have a keypress trigger for%. So far I have this:

$(iframeDocument).find('body').on('keydown', function(event) {
    if (event.which == 53) {
        alert("% pressed");
    }
});

But it also fires when I press "5". How can I distinguish between two?

Answer 1

You can use the property shiftKeyin the object eventto check if it is clicked SHIFTwhen the event occurred.

var keyCode = event.which || event.keyCode;

if (event.shiftKey && keyCode === 53) {
    // Shift key is pressed
    console.log('% pressed');
}

Answer 2

Use event.key. This can be seen in the demo in the jQuery documentation for.keydown() .

$(iframeDocument).find('body').on('keydown', function(event) {
    if (event.key === '%') {
      console.log(event.key + ' pressed');
    }
});

MDN describes this property :

, , .

, -. . caniuse .

, , ( React ):

class Label extends React.Component {
  static keydownListener(event) {
    this.setState({ label: event.key });
  }

  constructor() {
    super();

    this.state = { label: 'Press any key' };
    this.listener = Label.keydownListener.bind(this);
    
    window.addEventListener('keydown', this.listener);
  }
  
  componentWillUnmount() {
    window.removeEventListener('keydown', this.listener);
  }

  render() {
    return (
      <div>{this.state.label}</div>
    );
  }
}

ReactDOM.render(<Label />, document.body);

window.focus();

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>