Question

假设我有两页：客户页面

项目页面

在这两个页面中我都有添加按钮，是否可以创建快捷键，例如 ctrl + A 将点击添加按钮， ctrl + B 将用于提交和 ctrl + E 新实体？非常感谢先进的

Answer 1

是的，这绝对是可能的！

您可以自己构建代码，但重新发明轮子没有意义，因此请尝试使用预构建库之一。例如： https://craig.is/killing/mice

您可以创建自定义快捷方式并将其绑定到javascript函数。这些功能将处理动作。

祝你好运！

另见：How can I add a JavaScript keyboard shortcut to an existing JavaScript Function?

Answer 2

检测多个keydowns用作快捷方式的简单方法：

let keysDown = {};
window.onkeydown = function(e) {
  keysDown[e.key] = true;

  if (keysDown["Control"] && keysDown["a"]) {
    //do what you want when control and a is pressed for example
  }
  //else if( another combination ){
  //    another shortcut
  //}
}

window.onkeyup = function(e) {
  keysDown[e.key] = false;
}

Answer 3

我已经开发了定制脚本来通过添加类来实现此功能

示例：<button type="button" class="ctrl-p">Custom Print</button>

在这里查看https://jsfiddle.net/RaviMakwana/k6zL1q9t/

// 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();
        }
    })
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

为网页上的特定按钮创建快捷键|铬

3 个答案: