Javascript 如何在键盘上也使用 onclick 功能

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23800977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:34:56  来源:igfitidea点击:

Javascript How to use onclick function also with keyboard

javascriptonclickkeyboard-events

提问by Sascuash

I hope the title of the question fits to what I'm asking here.

我希望问题的标题适合我在这里提出的问题。

I have this code in HTML & javascript:

我在 HTML 和 javascript 中有这个代码:

<button id="Z">Z</button>

var btnZ = document.getElementById("Z");
btnZ.onclick = function() {
// Some code

Ok, now I want to execute btnZ.onclick function when the user press "Z" on keyboard. How can I do this without duplicating the code inside btnZ.onclick function?

好的,现在我想在用户按键盘上的“Z”时执行 btnZ.onclick 函数。如何在不复制 btnZ.onclick 函数中的代码的情况下执行此操作?

回答by jshthornton

You should have a common function which executes the code, but then have two event functions.

您应该有一个执行代码的公共函数,但随后有两个事件函数。

function do() {
     //some code
}
btnZ.onclick = function(e) {
    do();
};
btnZ.onkeydown = function(e) {
    var keyCode = e.keyCode;

    if(keyCode === 90) do();
}

This will only work if the user is focused on the element.

这仅在用户专注于元素时才有效。

回答by Al.G.

Use this:

用这个:

function clicked () {
    alert('clicked!');
    //some code
}
document.onkeydown = function (e) {
    var keyCode = e.keyCode;
    if(keyCode == 90) {
        clicked();
    }
};
btnZ.onclick = clicked;

回答by Magus

If you can use HTML5, you can use the accesskeyattribute(but it will respond to ALT + Z, and not Z only).

如果您可以使用 HTML5,则可以使用该accesskey属性(但它会响应 ALT + Z,而不仅仅是 Z)。

If you can't use HTML5, you must use the keydownevent.

如果您不能使用 HTML5,则必须使用该keydown事件。

回答by Evan Knowles

You can declare the function separately and just refer to it wherever you need it. For example,

您可以单独声明该函数,只需在需要的地方引用即可。例如,

 var yourOnClickFunction =  function() {
                               // Some code
 btnZ.onclick = yourOnClickFunction;

回答by Anil Namde

One way is to trigger event of other element as shown in below example

一种方法是触发其他元素的事件,如下例所示

<button >Hello</button>
clickButton = function(){
  alert("Hello clicked")
}
document.getElementsByTagName("button")[0].onclick = clickButton

keydown = function(e){
 if(e.keyCode==90)
   document.getElementsByTagName("button")[0].click()
}
document.onkeydown = keydown

if using JQuery you can use triggerfunction. Following is sample code and also find working example in codepen.io

如果使用 JQuery,您可以使用触发器功能。以下是示例代码,还可以在codepen.io 中找到工作示例

<button >Hello</button>

$("button").click(function(){
  alert("Hello clicked")
})

$(document).keypress(function(e){
  if(e.charCode == 90)
    $("button").trigger("click")
})

回答by jhyap

HTML

HTML

<button id="z">Z</button>

JS

JS

document.onkeypress = function (e) { 
  e = e || window.event; 
  var charCode = e.charCode || e.keyCode, 
      character = String.fromCharCode(charCode); 

  if (character == 'z')
  alert(character);
};

document.getElementById('z').onclick = function (e){
    alert(document.getElementById('z').id)
}

JSFiddle

JSFiddle