jqueryのキーダウン時にキー "5"と "％"を区別する方法は？

Question

％のキー押しでトリガーを付けることができます。これまでのところ、私はこれを持っています：

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

しかし、それは私が "5"を押すとトリガーになります。どのように私は2つを区別することができますか？

Answer 1

eventオブジェクトのshiftKeyプロパティを使用して、イベント発生時にSHIFTが押されたかどうかを確認できます。

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

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

Answer 2

event.keyを使用してください。 jQuery documentation for .keydown()のデモに表示されています。

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

MDN describes this property：

押されたキーが印刷された表現を持っている場合、返される値は、キーの印字可能な表現を含む空でないUnicode文字列です。

このプロパティは、ブラウザ間で完全に互換性があるわけではありません。サポートされているブラウザーとサポートされていないブラウザーの包括的なリストについては、caniuseを参照してください。確かに、

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>