web-dev-qa-db-ja.com

jQueryを使ってキー押下イベントを発生させるための最も確実な方法

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

また、特殊文字を使ってキーを押すとまったく機能しないという雰囲気もあります。誰かがこれを行った人を確認できますか？

jqueryeventstriggerskeypress
245
mkoryak

Keypressまたはkeydownイベントを発生させたいのなら、あなたがしなければならないのは、次のとおりです。

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

もう少し簡潔になりました jQuery 1.6以降 ：

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

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

（jQuery UIを使用していない場合は、代わりに適切なキーコードを入力してください。）

78
nickb

本当の答えは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に対して標準のクロスブラウザチェックを行うのが常に最も安全で、この場合は両方を定義するだけです。

68
Tomas

あなたがjQuery UIも使っているならば、あなたはこのようにすることができます：

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

私はそれをキーアップで動作させました。

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

さて、私にとってはこれで動作します...

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}]);
4
molokoloco

あなたが使用することができます一行でそれをやりたい

$("input").trigger(jQuery.Event('keydown', { which: '1'.charCodeAt(0) }));
2
Benjamin Udink ten Cate

それはまたこのように達成することができます（ docs ）

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

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

これはChrome上のAngularJSアプリではうまくいきませんでした。 Nadiaが最初のコメントで指摘しているように、その文字は入力フィールドには決して表示されません（少なくともそれが私の経験でした）。さらに、以前の解決策は入力フィールドでの現在のテキスト選択を考慮に入れていません。私は素晴らしいライブラリ 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'})
2
Flint O'Brien

console.log( String.fromCharCode(event.charCode) );

私は推測の文字をマップする必要はありません。

1
Weldan Jamili