Как создать комбинацию клавиш для кнопки ввода

Ответ 1

Как пояснил 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="">

Ответ 2

Я просто использовал сторонний 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>

Ответ 3

Могу ли я сделать это с помощью 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;
  }
});

Ответ 4

Я сделал пример в jsFiddle, он использует стрелку вверх и вниз, поэтому он фокусирует следующий или предыдущий входной контроль соответственно. Посмотрите

Ответ 5

Я буду использовать это:

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

И пользователь должен ввести: shift + alt + n

Ответ 6

Вы можете сделать это...

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

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

    }
});

jsFiddle.