Set Shortcut key on Live Page

on development

by RaviMakwana

HTML

<div id="banner-message">
  <span>Pressed Key</span> <br />
  <button>Button 1</button>  
  <button>Button 2</button>  
  <button>Button 3</button>  
  <p>Hello World</p>
<hr/>
Select Button and Enter Key to start <a id="btnStartShortcut" href="#" onclick="">click here</a>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var banner = $("#banner-message")
var p = $("p")

var button = $("button")

var btnStartShortcut = $("#btnStartShortcut")
// handle click and add class
button.on("click", function () {
  $(p).html(this.innerText)
})

btnStartShortcut.on("click", function () {
  setTimeout(function () {
    $(document).one(
      "dblclick",
      function (e) {
        $(document).keydown(function (e) {
          if (e.keyCode == 27) {
            // To Close Bootbox Popup
            $('button[data-dismiss="modal"]').click()
          }

          $(e.target).trigger("click")
          return false
        })
      },
      100,
    )
  })
})