jquery - не может поймать `@` (на символе скорости) по событию keyup

Question

У меня в коде событие keyup, и мне нужно поймать символ @. Я использую этот код:

$(function() {
  $("#textbox").keyup(function(e) {
    var keynum = e.keyCode;
    if (keynum && e.shiftKey && keynum == 50) {
      // Made a small change.
      console.log("You pressed @ and value is: " + e.target.value);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="textbox" />

Теперь проблема в том, что он не работает, когда пользователь набирает shift+2 немного быстрее

РЕДАКТИРОВАТЬ

Вы можете воспроизвести эту проблему, выпустив модификатор (клавиша Shift) за несколько миллисекунд до другой (2 на моей клавиатуре) клавиши, то есть очень быстро набрав shift + 2.

@ ConstantinGroßбыл в состоянии решить эту проблему и имеет обходной путь. Пожалуйста, проверьте принятый ответ ниже.

Answer 1

Кажется, действительно, проблема в том, что jQuery обнаруживает многоключевые символы, когда они выполняются слишком быстро (например, отпускание клавиши-модификатора всего за несколько миллисекунд до другой клавиши). Я смог воспроизвести это и на моей раскладке клавиатуры в Германии, где @ равно AltGr+Q. Вот еще одно решение, отслеживающее количество раз, когда символ @ встречается во входном значении. Не очень элегантно, но для меня это надежно.

$("#textbox").keyup(function(e) {
  // if content is empty reset at-count
  if('' === $(this).val().trim()) {
     $(this).data('at-count', 0);
  }
  // removing all characters other than @, then counting the length
  var atCount = $(this).val().replace(/[^@]/g, "").length;
  // if the number of @ in the input value has increased:
  if (atCount > ($(this).data('at-count') || 0)) {
    console.log("You pressed @ and value is: " + e.target.value);
  }
  // store the current @ count for later comparison
  $(this).data('at-count', atCount);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="textbox" />

Answer 2

Вы можете использовать KeyboardEvent.key (e.key vs e.keyCode): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

$("#textbox").keyup(function(e) {
  if (e.key === '@') {
    console.log("You pressed @ and value is: " + e.target.value);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="textbox" />