Shortcut Key With CTRL+KEY

Change class name on click in jQuery

by RaviMakwana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button class="ctrl-s" title="s">Change color</button><br/><br/>
  <span>Press CTRL+S to trigger click event of button</span>
</div>
<a href="https://rawgit.com/jeresig/jquery.hotkeys/master/test-static-01.html">jquery.hotkeys</a>

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;
}

#banner-message span {
  padding: 20px;
  font-size: 15px;
  text-align: center;
  margin: 0 auto;
}

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 button = $("button")

// handle click and add class
button.on("click", function(){
	if(banner.hasClass("alt"))
  	banner.removeClass("alt")
  else
  	banner.addClass("alt")
})

$(document).ready(function(){
	$(document).on('keydown', function (e) {
        
         if (e.ctrlKey) {
            $('[class*="ctrl-"]:not([data-ctrl])').each(function (idx, item) {
                var Key = $(item).prop('class').substr($(item).prop('class').indexOf('ctrl-') + 5, 1).toUpperCase();
                $(item).attr("data-ctrl", Key);
                $(item).append('<div class="tooltip fade top in tooltip-ctrl alter-info" role="tooltip" style="margin-top: -61px; display: block; visibility: visible;"><div class="tooltip-arrow" style="left: 49.5935%;"></div><div class="tooltip-inner"> CTRL + ' + Key + '</div></div>')
            });
        }
         
        if (e.ctrlKey && e.which != 17) {
            var Key = String.fromCharCode(e.which).toLowerCase();
            if( $('.ctrl-'+Key).length == 1) {
                e.preventDefault();
                if (!$('#divLoader').is(":visible"))
                    $('.ctrl-'+Key).click();
                console.log("You pressed ctrl + "+Key );
            }
        }
    });
    $(document).on('keyup', function (e) {
		if(!e.ctrlKey ){
          $('[class*="ctrl-"]').removeAttr("data-ctrl");
            $(".tooltip-ctrl").remove();
        }
    })
});