Question

我希望能够在按键上触发％。到目前为止，我有这个：

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

但是，当我按下＆＃34; 5＆＃34;时，它也会触发。我如何区分这两者？

Answer 1

您可以在shiftKey对象中使用event属性来检查事件发生时是否按下 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。

如果你好奇地捣乱并看看它产生了什么价值，试试这个演示（它只是为了好玩而使用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>

如何区分键＆＃34; 5＆＃34;和＆＃34;％＆＃34;在jquery的keydown？

2 个答案: