Javascript Wie zu verwenden onclick-Funktion auch mit Tastatur

Ich hoffe der Titel der Frage passt was ich Frage hier.

Habe ich diesen code in HTML & javascript:

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

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

Ok, jetzt will ich ausführen btnZ.onclick-Funktion wenn der Benutzer die Taste "Z" auf der Tastatur. Wie kann ich dies tun ohne das duplizieren von code innerhalb btnZ.onclick-Funktion?

Nur eine benannte Funktion?
OnClick ist ein voll Maus-Klick (unten + release). Für die Verwendung der Tastatur onKeyUp. Ich bin auf mobile und geben Sie den vollständigen Funktion dauert eine Ewigkeit, so suchen Sie die neueste Methode gor keyup und keypress...

InformationsquelleAutor Sascuash | 2014-05-22

  1. 2

    Verwenden:

    function clicked () {
    alert('clicked!');
    //some code
}
document.onkeydown = function (e) {
    var keyCode = e.keyCode;
    if(keyCode == 90) {
        clicked();
    }
};
btnZ.onclick = clicked;
    Ich wusste nicht, über die onkeydown-Funktion, aber es ist wirklich hilfreich. Danke @user3132718

    InformationsquelleAutor Al.G.

  2. 3

    Sollten Sie haben eine gemeinsame Funktion, die führt den code aus, aber dann haben zwei event-Funktionen.

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

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

    Wird dies nur funktionieren, wenn der Benutzer konzentriert sich auf das element.

    ...aber es wird nicht btnZ.onkeydown...
    Danke, das hat mir geholfen
    Sie können 'onkeyup' wenn Sie es vorziehen, den code einmal ausgeführt.

    InformationsquelleAutor jshthornton

  3. 1

    Wenn Sie können mit HTML5, können Sie die accesskey - Attribut (aber es reagiert auf ALT + Z und nicht Z nur).

    Wenn Sie nicht verwenden können HTML5 verwenden, müssen Sie die keydown Veranstaltung.

    Siehe w3fools.com
    Ich weiß w3shools ist nicht immer gut. Aber welche Seite soll ich verwenden, wenn ich verbinden möchte einige html-Dokumentation ?
    developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes - Mozilla-Dokumentation für HTML/CSS/Javascript ist deutlich besser in Qualität und Genauigkeit.

    InformationsquelleAutor Magus

  4. 0

    Können Sie die Funktion deklarieren, die separat und nur finden Sie es, wo immer Sie es brauchen. Zum Beispiel,

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

    InformationsquelleAutor Evan Knowles

  5. 0

    HTML

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

    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

    InformationsquelleAutor jhyap

  6. 0

    Es ein trigger-Ereignis von einem anderen element, wie gezeigt, in Beispiel weiter unten

    <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

    wenn mithilfe von JQuery können Sie trigger Funktion. Folgende Beispiel-code und finden auch arbeiten, beispielsweise in codepen.io

    <button >Hello</button>

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

$(document).keypress(function(e){
  if(e.charCode == 90)
    $("button").trigger("click")
})
    OP hat nicht gesagt, Sie waren mit jQuery...

    InformationsquelleAutor Anil Namde

Schreibe einen Kommentar