回答:
次のように、それらを直接呼び出すことで任意のイベントをトリガーできます。
$(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プロパティとのブラウザ間の互換性に関して。
ctrlKey: true
:、またshiftKey
、altKey
次のようなイベントをディスパッチできます
el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
el.dispatchEvent(new Event('keypress', {keyCode: 'a'}))
Ctrl
: el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 70, ctrlKey: true }));
(これはショートカットの原因になりますCtrl + F
)
トリガするにはenterキー操作を、私はキーコードプロパティを使用して、具体的には、@ebynum応答を変更する必要がありました。
e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);
keydown
イベントがキャッチされていない、または私はここで何か悪いことをしていますか?fiddle.jshell.net/Palestinian/8d8J9
これは、任意のイベントをトリガーするバニラ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);
}
}
これを実現するには、次の方法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" />
まず第一に、私は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
jQueryプラグイン内でリスナーが定義されている特定のコンテキストでは、keypressイベントを正常にシミュレートし、最終的にそのリスナーによってキャッチされたのは、setTimeout()を使用することだけであることに注意を向けたいと思いました。例えば
setTimeout(function() { $("#txtName").keypress() } , 1000);
の末尾に配置されていますが、の使用$("#txtName").keypress()
は無視されました.ready() function
。とにかく、特定のDOM補足が非同期で作成されることはありませんでした。
TypeScriptがKeyboardEventInitにキャストされ、正しいkeyCode整数を提供する場合
const event = new KeyboardEvent("keydown", {
keyCode: 38,
} as KeyboardEventInit);
$('item').trigger('keypress', {which: 'A'.charCodeAt(0)});