Определенный способ запуска событий нажатия клавиш с помощью jQuery


260

Я прочитал все ответы на эти вопросы, и ни одно из решений, похоже, не работает.

Кроме того, я чувствую, что нажатие клавиш с помощью специальных символов не работает вообще. Может кто-нибудь проверить, кто это сделал?


14
Нет, вы скучаете, поняли концепцию. Это не так, как это должно работать. Триггер будет вызывать только обработчик событий. Это на самом деле не будет печатать ключ. Если вы хотите смоделировать эффект печати ключа, просто добавьте ключ к введенному значению и одновременно инициируйте событие.
Надя Алрамли

Интересно, я этого не знал. В таком случае, можете ли вы сказать мне, будет ли запуск события также запускать его для библиотек, не являющихся jquery? например, если у меня настроен onKeydown на обычном JS, будет ли он захватывать мое «поддельное» событие?
mkoryak

2
да, если был установлен onkeydown = '...' на обычном js. Это будет вызвано поддельным событием. Я не был уверен в этом. Но я сделал быстрый тест, и это сработало.
Надя Алрамли

2
@ Надя Спасибо за это! Я перечитал все ответы, задаваясь вопросом, почему вещи не работали, прежде чем понять, что мои ожидания не оправдались. Я подозреваю, что многие другие люди будут иметь такие же заблуждения.
mikemaccana

3
Два года спустя ... читая страницу, кажется, что определенным способом является: $ ('input # search'). Trigger ($. Event ('keydown', {which: $. Ui.keyCode.ENTER, keyCode: $ .ui.keyCode.ENTER}));
molokoloco

Ответы:


365

Если вы хотите вызвать событие нажатия клавиши или нажатия клавиши, то все, что вам нужно сделать, это:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);

42
вопрос в том, как вызвать, а не как захватить
Чад Грант

2
Я добавил пример для запуска события
Надя Алрамли

4
Очень хороший ответ. Стоит отметить, что jQuery.Event доступен для jQuery 1.3 или выше. Это стало актуальным в этом вопросе: stackoverflow.com/questions/1823617/…
artlung

8
Это не работает для меня с ползунком пользовательского интерфейса jQuery. Я должен был установить e.keyCode как ответ OreiA ниже.
crizCraig

2
Между прочим, у меня был больший успех с 'keyup' для моего приложения
отметка

81

Чуть более лаконично теперь с jQuery 1.6+ :

var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } );

$('input').trigger(e);

(Если вы не используете jQuery UI, вместо этого введите соответствующий код клавиши.)


4
Просто не забудьте заменить «keyCode» на «который», а также.
Ричард Нинабер

Да, вы должны определить, какой и keyCode должен быть безопасным (если прослушиватель событий проверяет e.keyCode, он будет работать только в том случае, если вы определите keyCode при создании объекта jQuery.Event)
jackocnr

1
jQuery нормализует, какой / keyCode, так что включение любого должно делать оба.
Найджел Анхель

+1 за ссылку на api.jquery.com; и текущие версии jQuery не нормализуют, какой / keyCode, поэтому вы должны предоставить оба для безопасности
Виктор

2
@SamuelLindblom Я должен был написать это более ясно: jQuery не нормализует свойства события, передаваемые через .trigger(jQuery.Event('name', props)). Посмотрите на пример jsfiddle.net/9ggmrbpd/1 - свойства сработавшего события передаются как есть. Исходный код: github.com/jquery/jquery/blob/master/src/event.js#L739
Виктор,

68

Реальный ответ должен включать keyCode:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
e.keyCode = 50
$("input").trigger(e);

Хотя на сайте jQuery написано, что и keyCode нормализованы, они очень сильно ошибаются. Всегда безопаснее выполнять стандартные кросс-браузерные проверки для e.which и e.keyCode, и в этом случае просто определить оба.


34
+1. Кстати, e.keyCode = e.which = 50;в одной строке было бы приятнее. :)
Sk8erPeter

Я только что узнал, что использование только keyCodeне работает. Пришлось установить оба, чтобы это работало
Тасос К.

@ Sk8erPeter не будет, если только это не соревнование по golph-кодированию
shabunc

18

Если вы также используете jQuery UI, вы можете сделать это так:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);

1
e. который, кажется, не работает с моим слайдером jQuery UI. Спасибо за этот ответ. Это работает.
crizCraig

5

Я заставил это работать с keyup.

$("#id input").trigger('keyup');

3
в моем вопросе 6 лет назад я также хотел установить код ключа, но не знал как.
mkoryak

4

Хорошо, для меня, что работа с этим ...

var e2key = function(e) {
    if (!e) return '';
    var event2key = {
        '96':'0', '97':'1', '98':'2', '99':'3', '100':'4', '101':'5', '102':'6', '103':'7', '104':'8', '105':'9', // Chiffres clavier num
        '48':'m0', '49':'m1', '50':'m2', '51':'m3', '52':'m4', '53':'m5', '54':'m6', '55':'m7', '56':'m8', '57':'m9', // Chiffres caracteres speciaux
        '65':'a', '66':'b', '67':'c', '68':'d', '69':'e', '70':'f', '71':'g', '72':'h', '73':'i', '74':'j', '75':'k', '76':'l', '77':'m', '78':'n', '79':'o', '80':'p', '81':'q', '82':'r', '83':'s', '84':'t', '85':'u', '86':'v', '87':'w', '88':'x', '89':'y', '90':'z', // Alphabet
        '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown' // KEYCODES
    };
    return event2key[(e.which || e.keyCode)];
};

var page5Key = function(e, customKey) {
    if (e) e.preventDefault();
    switch(e2key(customKey || e)) {
        case 'left': /*...*/ break;
        case 'right': /*...*/ break;
    }
};

$(document).bind('keyup', page5Key);

$(document).trigger('keyup', [{preventDefault:function(){},keyCode:37}]); 

2

В случае, если вам нужно учитывать текущий курсор и выделение текста ...

Это не работает для меня для приложения AngularJS на Chrome. Как указывает Надя в исходных комментариях, персонаж никогда не виден в поле ввода (по крайней мере, это был мой опыт). Кроме того, предыдущие решения не учитывают текущий выбор текста в поле ввода. Мне пришлось использовать замечательную библиотеку jquery-selection .

У меня есть настраиваемая экранная цифровая клавиатура, которая заполняет несколько полей ввода. Мне пришлось...

  1. На фокусе, сохраните lastFocus.element
  2. При размытии сохранить текущий выделенный текст (начать и остановить)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. Когда кнопка на моей клавиатуре нажата:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})



1

Это может быть достигнуто как это документы

$('input').trigger("keydown", {which: 50});

1
Это, похоже, не работает, потому что при этом используется аргумент extraParameters, который ничего не устанавливает внутри аргумента события, но добавляет дополнительные аргументы к обратному вызову обработчика события.
TimeWaster

1
Неправильное решение
Entwickler
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.