web-dev-qa-db-ja.com

入力ボタンのキーボードショートカットを作成する方法

多数の写真を表示しており、各写真には独自のHTMLページがあります。 onclickで画像の次のリンクに移動する入力ボタンがあります。ただし、キーボードの矢印を使用して前後に移動できるようにします。私はコーディングが初めてであり、これが可能かどうかわかりません。アクセスキーを使用してHTMLでこれを行うことができます：

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

または、JQueryプラグインを使用する必要がありますか？もしそうなら、どれ？

jqueryhtmlbuttonkeyboard-shortcuts
34
Ryan Bennett

zzzzBov で説明したように、HTML accesskeyは、キーと組み合わせた場合にのみトラップされるキーを定義します ALT キー。それが、それが単独のキーをトラップするのに役に立たない理由です。

ただし、カーソルキーをトラップするイベントを選択する場合は特に注意する必要があります。これは、 Webkitは、標準ではないため、keypressイベントでトラップしないことを決定したため です。現時点では、ここでの他の3つの回答はこのkeypressイベントを使用しているため、Googleでは機能しませんChromeまたはSafari、ただし、それをkeydownに変更すると、すべてのブラウザーで機能します。

このjQueryコードを使用して、のkeydownイベントをキャプチャできます。 left、 right、 up、そして down 矢印キー：

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

そして、次のコードスニペットで、画像を使用して画像を交換する完全な例を見ることができますキーまたはボタン。

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="">

更新（2016年5月）

keyCodeは非推奨になりました（ただし、クロスブラウザソリューションはまだ見つかりません）。引用 keyCodeのMDN記事 ：

非推奨

この機能は、Web標準から削除されました。一部のブラウザではまだサポートされている場合がありますが、削除される過程にあります。古いプロジェクトや新しいプロジェクトでは使用しないでください。これを使用するページまたはWebアプリはいつでも壊れる可能性があります。

...

これは、新しいWebアプリケーションで使用しないでください。 IEおよびFirefoxはすでに（部分的に）KeyboardEvent.keyをサポートしています。また、Google ChromeおよびSafariは、DOMレベルの古いドラフトで定義されているKeyboardEvent.keyIdentifierをサポートしています3イベント：それらまたはそれらの1つを使用できる場合は、可能な限りそれらを使用する必要があります。

33
Mariano Desanze

サードパーティ shortcut.js を使用しました。とてもフレンドリーです。 参照 できます。

<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

アクセスキーを使用してHTMLでこれを行うことができます：

いいえ、アクセスキーは alt

そう accesskey="a" 作る予定です Alt+A ショートカットになります。

または、jQueryプラグインを使用する必要がありますか？

いいえ、通常の古いjavascriptを使用できます。 jQueryも機能します。

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

jsFiddle で例を示しました。上下の矢印キーを使用して、それぞれ次または前の入力コントロールにフォーカスします。ご覧ください

2
Milan Jaric

私はこれを使用します：

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

そして、ユーザーは次のように入力する必要があります：shift + alt + n

2
PutihTua

これを行うことができます...

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

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

    }
});

jsFiddle 。

0
alex