How to use hotkeys-js - 10 common examples

this.$clearBtn.on('click', () => {
      delete LS.mpe_content
      this.setValue('')
    })
    // 快捷键
    hotkeys('⌘+alt+u, ctrl+alt+u', () => {
      this.$nav.toggle()
      this.resize()
      return false
    })
    function save () {
      that._autoSave()
      let $toast = that.$toast.show()
      setTimeout(() => $toast.hide(), 800)
    }
    hotkeys('⌘+s, ctrl+s', () => {
      save()
      return false
    })
    this.editor.commands.addCommand({
      name: 'customSave',
      bindKey: {win: 'Ctrl-s', mac: 'Command-s'},
      exec () {
        save()
      }
    })
    // hotkeys('⌘+alt+n, ctrl+alt+n', (e) => {
    //   delete LS.mpe_content
    //   this.setValue('')
    //   return false
    // })
  }

import hotkeys from 'hotkeys-js'

hotkeys.filter = function (event) {
  var tagName = (event.target || event.srcElement).tagName
  hotkeys.setScope(
    /^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other'
  )
  return true
}

function isMac () {
  return navigator.userAgent.toLowerCase().indexOf('mac') > 0
}

const ctrl = isMac() ? '⌘' : 'ctrl'

hotkeys(`${ctrl}+s`, 'input', function (event, handler) {
  console.log(handler.key)
  event.preventDefault()

this.elements       = []

  hotkeys(key_events, (e, handler) => {
    if (e.cancelBubble) return

    e.preventDefault()

    let selectedNodes = this.elements
      , keys = handler.key.split('+')

    keys.includes('left') || keys.includes('right')
      ? changeHue(selectedNodes, keys, 's', Color)
      : changeHue(selectedNodes, keys, 'l', Color)
  })

  hotkeys(command_events, (e, handler) => {
    e.preventDefault()
    let keys = handler.key.split('+')
    keys.includes('left') || keys.includes('right')
      ? changeHue(this.elements, keys, 'a', Color)
      : changeHue(this.elements, keys, 'h', Color)
  })

  hotkeys(']', (e, handler) => {
    e.preventDefault()

    if (this.active_color == 'foreground')
      this.active_color = 'background'
    else if (this.active_color == 'background')
      this.active_color = 'border'

    Color.setActive(this.active_color)

const button = document.querySelector('#js-shortcut-wip')
  if (button) {
    button.click()
  }
})

hotkeys(`${ctrl}+enter`, 'input', function (event, handler) {
  console.log(handler.key)
  event.preventDefault()
  const button = document.querySelector('#js-shortcut-submit,#js-shortcut-post-comment')
  if (button) {
    button.click()
  }
})

hotkeys(`${ctrl}+e`, 'all', function (event, handler) {
  console.log(handler.key)
  event.preventDefault()
  const button = document.querySelector('#js-shortcut-edit')
  if (button) {
    button.click()
  }
})

hotkeys(`${ctrl}+b`, 'all', function (event, handler) {
  console.log(handler.key)
  event.preventDefault()
  const button = document.querySelector('#js-shortcut-check')
  if (button) {
    button.click()
  }

e.preventDefault()

    let selectedNodes = selection()
      , keys = handler.key.split('+')

    if (keys.includes('left') || keys.includes('right'))
      keys.includes('shift')
        ? changeHDistribution(selectedNodes, handler.key)
        : changeHAlignment(selectedNodes, handler.key)
    else
      keys.includes('shift')
        ? changeVDistribution(selectedNodes, handler.key)
        : changeVAlignment(selectedNodes, handler.key)
  })

  hotkeys(command_events, (e, handler) => {
    e.preventDefault()

    let selectedNodes = selection()
      , keys = handler.key.split('+')

    if (keys.includes('left') || keys.includes('right'))
      keys.includes('shift')
        ? changeOrder(selectedNodes, handler.key)
        : changeDirection(selectedNodes, 'row')
    else
      keys.includes('shift')
        ? changeWrap(selectedNodes, handler.key)
        : changeDirection(selectedNodes, 'column')
  })

  return () => {

import Hotkeys from 'hotkeys-js';
import { Component, PropTypes } from '../utils/';

Hotkeys.filter = function (event) {
  const tagName = (event.target || event.srcElement).tagName;
  Hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
  return true;
};
export default class ReactHotkeys extends Component {
  constructor(props) {
    super(props);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onKeyUp = this.onKeyUp.bind(this);
    this.handleKeyUpEvent = this.handleKeyUpEvent.bind(this);
    this.isKeyDown = false;
    this.handle = {};
  }
  componentDidMount() {
    Hotkeys.unbind(this.props.keyName);
    Hotkeys(this.props.keyName, this.onKeyDown);

Hotkeys.filter = function (event) {
  const tagName = (event.target || event.srcElement).tagName;
  Hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
  return true;
};
export default class ReactHotkeys extends Component {

hotkeys.filter = function (event) {
  var tagName = (event.target || event.srcElement).tagName
  hotkeys.setScope(
    /^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other'
  )
  return true
}

connectedCallback() {
    hotkeys('shift+/', e =>
      this.cur_tool
        ? this.hideTool()
        : this.showTool())

    hotkeys('esc', e => this.hideTool())
  }