jQueryでキープレスイベントをトリガーする確実な方法


260

私はこの質問に対するすべての回答を読みましたが、どの解決策も機能しないようです。

また、特殊文字を使用したキープレスのトリガーがまったく機能しないという雰囲気も得ています。誰かがこれを行ったことを誰かが確認できますか?


14
概念を理解していることをお見逃しなく。これはそれがどのように機能することになっているのかではありません。トリガーはイベントハンドラーのみを呼び出します。キーは実際には印刷されません。キーの印刷の効果をシミュレートする場合は、キーを入力値に追加して、同時にイベントをトリガーします。
Nadia Alramli、2009年

興味深いことに、私はそれを知りませんでした。その場合、イベントをトリガーすると、jquery以外のライブラリでもイベントがトリガーされるかどうかを教えてください。たとえば、プレーンなJSでonKeydownを設定している場合、「偽の」イベントがキャプチャされますか?
mkoryak 2009年

2
はい、onkeydown = '...'がプレーンなjsで設定されていた場合。偽のイベントによってトリガーされます。よくわかりませんでした。しかし、私は簡単なテストを行い、それはうまくいきました。
Nadia Alramli、2009年

2
@Nadiaありがとうございます!私は私の期待が正しくなかったことに気付く前に、物事がうまくいかない理由を不思議に思っているすべての答えを読みました。他の多くの人々も同じ誤解を持っているのではないかと思います。
mikemaccana 2012年

3
2年後...ページを読むと、最も確実な方法は次のようです:$( 'input#search')。trigger($。Event( 'keydown'、{which:$。ui.keyCode.ENTER、keyCode:$ .ui.keyCode.ENTER}));
molokoloco

回答:


365

keypressイベントまたはkeydownイベントをトリガーする場合は、次のことを行うだけです。

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

42
問題はどのようにトリガーするかであり、どのようにキャプチャするかではありません
チャドグラント

2
イベントをトリガーする例を追加しました
Nadia Alramli、2009年

4
とてもいい答えです。jQuery.EventはjQuery 1.3以降で使用できることに注意してください。これは、この質問に関連なった:stackoverflow.com/questions/1823617/...
artlung

8
これは、jQuery UIスライダーでは機能しませんでした。以下のOreiAの回答のようにe.keyCodeを設定する必要がありました。
crizCraig 2011

2
fwiw、アプリケーションの「キーアップ」でより多くの成功を収めた
マーク

81

jQuery 1.6以降で少し簡潔になりました

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

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

(jQuery UIを使用していない場合は、代わりに適切なキーコードをサブスクライブしてください。)


4
同様に、「which」を「keyCode」に置き換えることを忘れないでください。
Richard Nienaber

はい、どのkeyCodeを安全にするかを定義する必要があります(イベントリスナーがe.keyCodeをチェックする場合、jQuery.Eventオブジェクトの作成時にkeyCodeを定義した場合にのみ機能します)
jackocnr

1
jQueryはwhich / keyCodeを正規化するので、どちらかを入れると両方が実行されます。
Nigel Angel

api.jquery.comへのリンクの+1。そして現在のjQueryバージョンはwhich / keyCodeを正規化しないので、安全のために両方を提供する必要があります
Victor

2
@SamuelLindblomもっと明確に書いておくべきだった:jQueryはを介して渡されるイベントプロパティを正規化しない.trigger(jQuery.Event('name', props))。例jsfiddle.net/9ggmrbpd/1を見てください-トリガーされたイベントのプロパティはそのまま渡されます。ソースコード:github.com/jquery/jquery/blob/master/src/event.js#L739
Victor

68

本当の答えはkeyCodeを含める必要があります:

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

jQueryのWebサイトには、whichとkeyCodeは正規化されているとありますが、それらは非常に間違っています。e.whichとe.keyCodeの標準的なクロスブラウザチェックを行うことが常に最も安全であり、この場合は両方を定義するだけです。


34
+1。ちなみに、e.keyCode = e.which = 50;一行で書いた方がいいでしょう。:)
Sk8erPeter 2012

を使用keyCodeしても機能しないことがわかりました。それを機能させるために両方を設定する必要があった
TasosK。2014

@ Sk8erPeterは、Golphコーディングコンテストでない限り、行われません
shabunc

18

jQuery UIも使用している場合は、次のようにすることができます。

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

1
e。これは、jQuery UIスライダーでは機能しないようです。この回答をありがとう。それは動作します。
crizCraig、2011

5

キーアップで動作させました。

$("#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

現在のカーソルとテキストの選択を考慮する必要がある場合...

これは、ChromeのAngularJSアプリでは機能しませんでした。ナディアが元のコメントで指摘しているように、文字は入力フィールドに表示されません(少なくとも、それは私の経験でした)。さらに、以前のソリューションでは、入力フィールドでの現在のテキスト選択が考慮されていません。私は素晴らしいライブラリ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 2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.