blocks|key|3244909|text|您可以通过直接调用它们来触发任何事件，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3244910|$(function()+{
++++$('item').keydown();
++++$('item').keypress();
++++$('item').keyup();
++++$('item').blur();
});|code-block|syntax|javascript|3244911|这能做你想做的事吗？|3244912|您可能还应该触发.focus()和潜在的.change()|offset|length|style|CODE|3244913|如果您想使用特定的key来触发key-events，可以这样做：|3244914|$(function()+{
++++var+e+=+$.Event('keypress');
++++e.which+=+65;+//+Character+'A'
++++$('item').trigger(e);
});|3244915|这里有一些关于按键事件的有趣讨论：jQuery+Event+Keypress:+Which+key+was+pressed?，特别是关于跨浏览器与.which属性的兼容性。|3244916|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed^0|0|0|0|8|8|K|9|0|0|0|H|19|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|15|8|@$K|16|L|17|M|N]|$K|18|L|19|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$K|1D|L|1E|1|1F]]|A|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

You can trigger any of the events with a direct call to them, like this:

<pre><code>$(function() {
 $('item').keydown();
 $('item').keypress();
 $('item').keyup();
 $('item').blur();
});
</code></pre>

Does that do what you're trying to do?

You should probably also trigger <code>.focus()</code> and potentially <code>.change()</code>

If you want to trigger the key-events with specific keys, you can do so like this:

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

There is some interesting discussion of the keypress events here: <a href="https://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed">jQuery Event Keypress: Which key was pressed?</a>, specifically regarding cross-browser compatability with the .which property.

blocks|key|3244921|text|您现在可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3244922|var+e+=+$.Event("keydown",+{keyCode:+64});|code-block|syntax|javascript|3244923|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You're now able to do:

<pre><code>var e = $.Event("keydown", {keyCode: 64});
</code></pre>

blocks|key|304006|text|下面是一个普通的js示例，可以触发任何事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|304007|function+triggerEvent(el,+type){
if+('createEvent'+in+document)+{
++++++++//+modern+browsers,+IE9%2B
++++++++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'%2Be.eventType,+e);
++++}
}|code-block|syntax|javascript|304008|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's a vanilla js example to trigger any event:

<pre><code>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);
 }
}
</code></pre>

blocks|key|301257|text|您可以像这样调度事件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|301258|el.dispatchEvent(new+Event('focus'));
el.dispatchEvent(new+KeyboardEvent('keypress',{'key':'a'}));|code-block|syntax|javascript|301259|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could dispatching events like 

<pre><code>el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
</code></pre>

blocks|key|3244942|text|首先，我需要说的是，Sionnach733的示例运行得非常完美。一些用户抱怨没有实际的例子。这是我的两点意见。当我使用这个网站：https://www.youtube.com/tv时，我一直在做鼠标点击模拟。您可以打开任何视频并尝试运行此代码。它执行切换到下一个视频。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3244943|function+triggerEvent(el,+type,+keyCode)+{
++++if+('createEvent'+in+document)+{
++++++++++++//+modern+browsers,+IE9%2B
++++++++++++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'%2Be.eventType,+e);
++++}
}

var+nextButton+=+document.getElementsByClassName('icon-player-next')[0];
triggerEvent(nextButton,+'keyup',+13);+//+simulate+mouse/enter+key+press|code-block|syntax|javascript|3244944|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/tv^0|A|B|1S|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

First of all, I need to say that sample from Sionnach733 worked flawlessly. Some users complain about absent of actual examples. Here is my two cents. I've been working on mouse click simulation when using this site: <a href="https://www.youtube.com/tv" rel="nofollow noreferrer">https://www.youtube.com/tv</a>. You can open any video and try run this code. It performs switch to next video.

<pre><code>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
</code></pre>

blocks|key|3030847|text|可以通过：EventTarget.dispatchEvent(event)和传入一个新的KeyboardEvent作为事件来实现这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3030848|例如：element.dispatchEvent(new+KeyboardEvent('keypress',+{'key':+'a'}))|3030849|工作示例：|3030850|​|3030851|//+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'}));|code-block|syntax|javascript|3030852|<input+type="text"+placeholder="foo"+/>|3030853|3030854|MDN+dispatchEvent|3030855|MDN+KeyboardEvent|3030856|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent|1|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent^0|5|W|0|3|1U|0|0|0|0|0|0|0|H|0|0|0|H|1|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1E|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1F|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1G|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|1H|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|V|3|W|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|X|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]|15|$5|10|11|12|E|$13|16]]]]

You can achieve this with: <code>EventTarget.dispatchEvent(event)</code> and by passing in a new KeyboardEvent as the event.

For example: <code>element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))</code>

Working example:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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) =&gt; {
 console.log("You have pressed key: ", event.key);
});

input.addEventListener('keydown', (event) =&gt; {
 console.log(`key: ${event.key} has been pressed down`);
});

input.addEventListener('keyup', (event) =&gt; {
 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'}));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" placeholder="foo" /&gt;</code></pre>
</div>
</div>


<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent" rel="noreferrer">MDN dispatchEvent</a>

<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent" rel="noreferrer">MDN KeyboardEvent</a>

blocks|key|3030869|text|我认为我应该引起您的注意，在特定的上下文中，侦听器是在jQuery插件中定义的，那么唯一能成功地为我模拟按键事件的方法就是使用setTimeout()。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3030870|setTimeout(function()+{+$("#txtName").keypress()+}+,+1000);|code-block|syntax|javascript|3030871|任何$("#txtName").keypress()的使用都被忽略了，尽管放在.ready()+function的末尾。无论如何，没有特定的DOM补充是异步创建的。|offset|length|style|CODE|BOLD|3030872|entityMap^0|0|0|2|O|13|H|V|3|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@$I|S|J|T|K|L]|$I|U|J|V|K|L]|$I|W|J|X|K|M]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

I thought I would draw your attention that in the specific context where a listener was defined within a jQuery plugin, then the only thing that successfully simulated the keypress event for me, eventually caught by that listener, was to use setTimeout().
e.g.

<pre><code>setTimeout(function() { $("#txtName").keypress() } , 1000);
</code></pre>

Any use of <code>$("#txtName").keypress()</code> was ignored, although placed at the end of the <code>.ready() function</code>. No particular DOM supplement was being created asynchronously anyway.

blocks|key|298998|text|对于转换为KeyboardEventInit的typescript，并提供正确的keyCode整数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298999|const+event+=+new+KeyboardEvent("keydown",+{
++++++++++keyCode:+38,
++++++++}+as+KeyboardEventInit);|code-block|syntax|javascript|299000|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For typescript cast to KeyboardEventInit and provide the correct keyCode integer

<pre><code>const event = new KeyboardEvent("keydown", {
 keyCode: 38,
 } as KeyboardEventInit);
</code></pre>

What is the best way to simulate a user entering text in a text input box in JS and/or jQuery?

I don't want to actually put text in the input box, I just want to trigger all the event handlers that would normally get triggered by a user typing info into a input box. This means focus, keydown, keypress, keyup, and blur. I think. 

So how would one accomplish this?

Trigger a keypress/keydown/keyup event in JS/jQuery?

jQuery

在JS和/或jQuery中模拟用户在文本输入框中输入文本的最佳方式是什么？我不想在输入框中输入文本，我只想触发所有的处理程序，这些处理程序通常是由用户在输入框中输入信息而触发的。这意味着焦点、快捷键和模糊。我认为。那么如何做到这一点呢？

问在JS/jQuery中触发keypress/keydown/keyup事件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JS/jQuery中触发keypress/keydown/keyup事件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JS/jQuery中触发keypress/keydown/keyup事件？
EN