JS / jQueryでkeypress / keydown / keyupイベントをトリガーしますか?


173

JSやjQueryのテキスト入力ボックスにテキストを入力するユーザーをシミュレートする最良の方法は何ですか?

私はしていない私は、すべてのイベントトリガーにしたい、実際の入力ボックスにテキストを入れたいハンドラは通常の入力ボックスにユーザーの入力情報によってトリガーになるだろう。これは、フォーカス、キーダウン、キープレス、キーアップ、ブラーを意味します。おもう。

それで、これをどのように達成しますか?

回答:


240

次のように、それらを直接呼び出すことで任意のイベントをトリガーできます。

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

それはあなたがやろうとしていることをしていますか?

また.focus()、おそらくトリガーして潜在的に.change()

特定のキーでキーイベントをトリガーしたい場合は、次のようにできます:

$(function() {
    var e = $.Event('keypress');
    e.which = 65; // Character 'A'
    $('item').trigger(e);
});

ここにキープレスイベントの興味深い議論があります:jQueryイベントキープレス:どのキーが押されましたか?、特に.whichプロパティとのブラウザ間の互換性に関して。


3
または$('item').trigger('keypress', {which: 'A'.charCodeAt(0)});
Bob Stein

@ebynum Javascriptでコードを記述できますか(jqueryなし)。
Chris P

1
:あなたは、Ctrlキーが必要な場合ctrlKey: true:、またshiftKeyaltKey
ИльяЗеленько

52

次のようなイベントをディスパッチできます

el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

5
またはel.dispatchEvent(new Event('keypress', {keyCode: 'a'}))
Cuzox

1
@CuzoxなぜKeyboardEventを使用しないのですか?これは、shiftKeyのような値を自動入力します。これが正しい方法です。また、あなたはkeyCodeに文字列を入れました、それは間違っています。
SuperOP535 2018

7
あなたが必要な場合Ctrlel.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 70, ctrlKey: true }));(これはショートカットの原因になりますCtrl + F
ИльяЗеленько

31

トリガするにはenterキー操作を、私はキーコードプロパティを使用して、具体的には、@ebynum応答を変更する必要がありました。

e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);

2
keydownイベントがキャッチされていない、または私はここで何か悪いことをしていますか?fiddle.jshell.net/Palestinian/8d8J9
オマール

@マント:機能します。asp.netコントロールを修正するための完全なセレクターについては、こちらのコメントを確認してください:codeproject.com/Tips/269388/…Ajaxを使用している場合は、domに何かを挿入した後に呼び出してください。
Dan Randolph

23

これは、任意のイベントをトリガーするバニラjsの例です。

function triggerEvent(el, type){
if ('createEvent' in document) {
        // modern browsers, IE9+
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

7
いくつかの使用例を提供できますか?キーコードを送信するために関数をどのように使用しますか?
Mac

6
この投稿のソースコードは、ドキュメントを含む次のリンクにあります。plainjs.com
Kieren Dixon

17

これを実現するには、次の方法EventTarget.dispatchEvent(event)を使用します。イベントとして新しいKeyboardEventを渡します。

例えば: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

作業例:

// get the element in question
const input = document.getElementsByTagName("input")[0];

// focus on the input element
input.focus();

// add event listeners to the input element
input.addEventListener('keypress', (event) => {
  console.log("You have pressed key: ", event.key);
});

input.addEventListener('keydown', (event) => {
  console.log(`key: ${event.key} has been pressed down`);
});

input.addEventListener('keyup', (event) => {
  console.log(`key: ${event.key} has been released`);
});

// dispatch keyboard events
input.dispatchEvent(new KeyboardEvent('keypress',  {'key':'h'}));
input.dispatchEvent(new KeyboardEvent('keydown',  {'key':'e'}));
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));
<input type="text" placeholder="foo" />

MDN dispatchEvent

MDNキーボードイベント



2

まず第一に、私はSionnach733からのサンプルが完璧に機能したと言う必要があります。実際の例がないと不満を言うユーザーもいます。これが私の2セントです。このサイト(https://www.youtube.com/tv)を使用しているときは、マウスクリックのシミュレーションに取り組んでい ます。任意のビデオを開いて、このコードを実行してみてください。次の動画に切り替えます。

function triggerEvent(el, type, keyCode) {
    if ('createEvent' in document) {
            // modern browsers, IE9+
            var e = document.createEvent('HTMLEvents');
            e.keyCode = keyCode;
            e.initEvent(type, false, true);
            el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.keyCode = keyCode;
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

var nextButton = document.getElementsByClassName('icon-player-next')[0];
triggerEvent(nextButton, 'keyup', 13); // simulate mouse/enter key press

1

jQueryプラグイン内でリスナーが定義されている特定のコンテキストでは、keypressイベントを正常にシミュレートし、最終的にそのリスナーによってキャッチされたのは、setTimeout()を使用することだけであることに注意を向けたいと思いました。例えば

setTimeout(function() { $("#txtName").keypress() } , 1000);

の末尾に配置されていますが、の使用$("#txtName").keypress()無視されました.ready() function。とにかく、特定のDOM補足が非同期で作成されることはありませんでした。


1

TypeScriptがKeyboardEventInitにキャストされ、正しいkeyCode整数を提供する場合

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);

1
@CamiRodriguez TypeScriptで実行できることは何でも、JSで実行できます(jQueryのように)。TypeScriptがJS構文を台無しにしないことを除いて、それらを拡張するだけです。`as KeyboardEventInit`を削除すると、基本的にはJSコードになります。回答の+1、ありがとうございます。
GergőHorvathの
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.