Как создать сочетание клавиш для кнопки ввода - PullRequest
Новая
       18

Как создать сочетание клавиш для кнопки ввода

34 голосов
/ 21 февраля 2011

Я показываю кучу картинок, каждая из которых имеет свою HTML-страницу.У меня есть кнопка ввода, которая по клику приведет вас к следующей ссылке для изображения.Тем не менее, я хочу иметь возможность использовать стрелки клавиатуры для перемещения вперед и назад.Я новичок в кодировании и не знаю, возможно ли это.Могу ли я сделать это с HTML, используя ключ доступа: 

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

Или мне нужно использовать плагин JQuery?Если да, то какой?

Ответы [ 6 ]

33 голосов
/ 21 февраля 2011

Как объяснил zzzzBov , HTML accesskey определяет ключ, который будет захвачен только тогда, когда он комбинируется с ключом ALT .Вот почему это бесполезно для перехвата одной клавиши .

Но вы должны быть особенно внимательны при выборе события для перехвата клавиш курсора, потому что Webkit решил не перехватыватьих с событием keypress, которого нет в стандарте .В данный момент остальные 3 ответа здесь используют это событие keypress, и поэтому они не работают ни в Google Chrome, ни в Safari , но если вы измените его на keydown, они будут работать на всехбраузеры.

Вы можете использовать этот код jQuery для захвата события keydown влево , вправо , вверх и вниз клавиши со стрелками: 

$(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 г.)

keyCode недавно устарело (но я не нашелкросс-браузерное решение пока).Цитирование Статья MDN для keyCode :

Устаревший

Эта функция была удалена из веб-стандартов.Хотя некоторые браузеры все еще могут поддерживать его, он находится в процессе удаления.Не используйте его в старых или новых проектах.Страницы или веб-приложения, использующие его, могут в любой момент сломаться.

...

Это не должно использоваться новыми веб-приложениями.IE и Firefox уже (частично) поддерживают KeyboardEvent.key.Кроме того, Google Chrome и Safari поддерживают KeyboardEvent.keyIdentifier, который определен в старом наброске событий DOM уровня 3.Если вы можете использовать их или один из них, вы должны использовать их / это насколько это возможно.

24 голосов
/ 30 марта 2011

Я только что использовал стороннюю 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>
9 голосов
/ 21 февраля 2011

Можно ли сделать это с помощью 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;
  }
});
2 голосов
/ 23 сентября 2013

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

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

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

2 голосов
/ 21 февраля 2011

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

0 голосов
/ 21 февраля 2011

Вы могли бы сделать это ... 

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

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

    }
});

jsFiddle .

...