web-dev-qa-db-ja.com

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

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

I dont実際に入力ボックスにテキストを入れたい、すべてのイベントをトリガーしたいhandlersユーザーが入力ボックスに情報を入力することで通常トリガーされるこれは、フォーカス、キーダウン、キープレス、キーアップ、およびぼかしを意味します。おもう。

それでは、どのようにこれを達成するのでしょうか？

javascriptjavascript-eventsjquery
161
Alex

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

$(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 Event Keypress：どのキーが押されましたか？ 、特に.whichプロパティとのクロスブラウザ互換性に関して。

224
ebynum

トリガーする enter keypress、@ keybyプロパティを使用して、@ ebynumレスポンスを変更する必要がありました。

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

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

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

イベントをトリガーするVanilla 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);
    }
}
19
Sionnach733

次のことができるようになりました。

var e = $.Event("keydown", {keyCode: 64});
11
simonzack

これを実現するには、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 KeyboardEvent

7
JSON C11

まず、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
2
yuliskov

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

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

$("#txtName").keypress()の使用はignoredでしたが、.ready() functionの最後に配置されました。とにかく特定のDOMサプリメントは非同期に作成されていませんでした。

0
Fabien Haddadi

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

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