it-swarm.com.de

So erstellen Sie eine Tastenkombination für eine Eingabetaste

Ich zeige ein paar Bilder und jedes Bild hat eine eigene HTML-Seite. Ich habe eine Eingabeschaltfläche, über die onclick zum nächsten Link für das Bild führt. Ich möchte jedoch in der Lage sein, mit meinen Tastaturpfeilen vorwärts und rückwärts zu gehen. Ich bin neu in der Codierung und weiß nicht, ob dies möglich ist. Kann ich dies mit HTML mit dem accesskey machen:

<input type="button" accesskey="?" value="Next Item">

Oder muss ich ein JQuery-Plugin verwenden? Wenn ja, welcher?

33
Ryan Bennett

Wie zzzzBov erklärt, definiert der HTML accesskeyeinen Schlüssel, der nur in Kombination mit dem eingeschlossen wird ALT Schlüssel. Deshalb ist das nicht nützlich, um nur einen Schlüssel zu fangen .

Sie müssen jedoch bei der Auswahl des Ereignisses, bei dem die Cursortasten abgefangen werden sollen, besondere Sorgfalt walten lassen, da Webkit entschieden hat, sie nicht mit dem Ereignis keypressabzufangen, da dies nicht im Standard enthalten ist . In diesem Moment verwenden die anderen 3 Antworten dieses keypress-Ereignis. Deshalb funktionieren sie nicht in Google Chrome oder Safari , aber wenn Sie das ändern bis keydownfunktionieren sie in allen Browsern.

Mit diesem jQuery-Code können Sie das Ereignis keydownvon erfassen leftrightup, und down Pfeiltasten:

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case 37: // left arrow key
    case 38: // up arrow key
      e.preventDefault(); // avoid browser scrolling due to pressed key
      // TODO: go to previous image
      return;
    case 39: // right arrow key
    case 40: // up arrow key
      e.preventDefault();
      // TODO: go to next image
      return;
  }
});

Und in dem folgenden Codeausschnitt können Sie ein vollständiges Beispiel anzeigen und ausführen, in dem Bilder mit ausgetauscht werden die Tasten oder die Tasten.

var currentImage = 0;
var imagesArray = [
  'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png'
];

function hasPrev() {
  return currentImage > 0;
}

function hasNext() {
  return currentImage < imagesArray.length - 1;
}

function goToPrev(e) {
  e.preventDefault();
  if (!hasPrev())
    return;
  currentImage -= 1;
  updateScreen();
}

function goToNext(e) {
  e.preventDefault();
  if (!hasNext())
    return;
  currentImage += 1;
  updateScreen();
}

function updateScreen() {
  $('#imgMain').attr('src', imagesArray[currentImage]);
  $('#btnPrev').prop('disabled', !hasPrev());
  $('#btnNext').prop('disabled', !hasNext());
}

$(document).ready(function() {
  updateScreen();
  $('#btnPrev').click(goToPrev);
  $('#btnNext').click(goToNext);
});

var keyCodes = {
  left: 37,
  up: 38,
  right: 39,
  down: 40
};

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case keyCodes.left:
    case keyCodes.up:
      goToPrev(e);
      return;
    case keyCodes.right:
    case keyCodes.down:
      goToNext(e);
      return;
  }
});
button:enabled kbd {
  color: green;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnPrev">
  Previous Image
  <br/>
  <small>(arrow keys: <kbd>left</kbd> or <kbd>up</kbd>)</small>
</button>
<button id="btnNext">
  Next Image
  <br/>
  <small>(arrow keys: <kbd>right</kbd> or <kbd>down</kbd>)</small>
</button>
<br/>
<img id="imgMain" src="">

UPDATE (Mai 2016)

keyCode ist kürzlich veraltet (aber ich habe noch keine browserübergreifende Lösung gefunden). Zitieren MDN-Artikel für keyCode :

Veraltet

Diese Funktion wurde aus den Webstandards entfernt. Obwohl einige Browser dies noch unterstützen, wird es gerade gelöscht. Verwenden Sie es nicht in alten oder neuen Projekten. Seiten oder Web-Apps, die es verwenden, können jederzeit unterbrochen werden.

...

Dies sollte nicht von neuen Webanwendungen verwendet werden. IE und Firefox unterstützen KeyboardEvent.key bereits (teilweise). Google Chrome und Safari unterstützen auch KeyboardEvent.keyIdentifier, das im alten Entwurf von DOM Level 3-Ereignissen definiert ist. Wenn Sie sie oder eine von ihnen verwenden können, sollten Sie sie so weit wie möglich verwenden.

33
Mariano Desanze

Ich habe gerade einen Drittanbieter shortcut.js verwendet. Es ist sehr freundlich. Sie können Referenz es. 

<script type="text/javascript" src="js/shortcut.js"></script>

<script>
    shortcut.add("alt+s", function() {
        // Do something
    });   
    shortcut.add("ctrl+enter", function() {
        // Do something
    }); 
</script>
24
babygreat

Farlo mit HTML-Code und Zugriff auf:

Nein, accesskey is usato insieme aalt

Così farà accesskey="a"Alt+Aessere la scorciatoia.

O devo usare un plugin jQuery?

Nein, Sie müssen Javascript normal verwenden. Anche jQuery funziona.

$(window).keypress(function(e){
  var code = e.which || e.keyCode;
  switch ( code )
  {
    case 43:
      //do stuff
      return false;
    default:
      break;
  }
});
9
zzzzBov

Ich habe ein Beispiel in jsFiddle es verwendet die Pfeiltasten nach oben und unten, so dass auf die nächste bzw. vorherige Eingabesteuerung konzentriert wird. Schau mal

2
Milan Jaric

Ich werde das verwenden:

<input type="button" accesskey="n" value="Next Item">

Und der Benutzer sollte Folgendes eingeben: shift + alt + n

2
PutihTua

Sie könnten das tun ...

$(window).keypress(function(event) {
    switch (event.keyCode) {

    case 37:
        prev();
        break;
    case 39:
        next();
        break;

    }
});

jsFiddle .

0
alex