blocks|key|1537074|text|您是否正确地调度了事件？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1537075|function+simulateKeyEvent(character)+{
++var+evt+=+document.createEvent("KeyboardEvent");
++(evt.initKeyEvent+%7C%7C+evt.initKeyboardEvent)("keypress",+true,+true,+window,
++++++++++++++++++++0,+0,+0,+0,
++++++++++++++++++++0,+character.charCodeAt(0))+
++var+canceled+=+!body.dispatchEvent(evt);
++if(canceled)+{
++++//+A+handler+called+preventDefault
++++alert("canceled");
++}+else+{
++++//+None+of+the+handlers+called+preventDefault
++++alert("not+canceled");
++}
}|code-block|syntax|javascript|1537076|如果你使用jQuery，你可以这样做：|1537077|function+simulateKeyPress(character)+{
++jQuery.event.trigger({+type+:+'keypress',+which+:+character.charCodeAt(0)+});
}|1537078|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Did you dispatch the event correctly?</p>

<pre><code>function simulateKeyEvent(character) {
  var evt = document.createEvent("KeyboardEvent");
  (evt.initKeyEvent || evt.initKeyboardEvent)("keypress", true, true, window,
                    0, 0, 0, 0,
                    0, character.charCodeAt(0)) 
  var canceled = !body.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}
</code></pre>

<p>If you use jQuery, you could do:</p>

<pre><code>function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}
</code></pre>


blocks|key|1321907|text|我正在研究DOM+Keyboard+Event+Level+3+polyfill。在最新的浏览器中或使用此polyfill，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1321908|element.addEventListener("keydown",+function(e){+console.log(e.key,+e.char,+e.keyCode)+})

var+e+=+new+KeyboardEvent("keydown",+{bubbles+:+true,+cancelable+:+true,+key+:+"Q",+char+:+"Q",+shiftKey+:+true});
element.dispatchEvent(e);

//If+you+need+legacy+property+"keyCode"
//+Note:+In+some+browsers+you+can't+overwrite+"keyCode"+property.+(At+least+in+Safari)
delete+e.keyCode;
Object.defineProperty(e,+"keyCode",+{"value"+:+666})|code-block|syntax|javascript|1321909|更新：|1321910|现在我的polyfill支持遗留属性"keyCode“、"charCode”和"which“|1321911|var+e+=+new+KeyboardEvent("keydown",+{
++++bubbles+:+true,
++++cancelable+:+true,
++++char+:+"Q",
++++key+:+"q",
++++shiftKey+:+true,
++++keyCode+:+81
});|1321912|示例here|1321913|另外，这里是与我的polyfill分开的跨浏览器initKeyboardEvent：(gist)|1321914|Polyfill+demo|1321915|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/termi/DOM-Keyboard-Event-Level-3-polyfill|1|http://jsfiddle.net/termi/yjc5F/|2|https://gist.github.com/4654819/|3|http://h123.ru/-/tests/KeyboardEvent^0|5|Z|0|0|0|0|0|0|2|4|1|0|16|6|2|0|9|4|3|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|F|7|1C|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1D|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1E|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|1F|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|Q|3|R|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|S|3|T|5|6|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|U|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]|14|$5|X|Y|Z|C|$10|15]]|16|$5|X|Y|Z|C|$10|17]]]]

<p>I am working on <a href="https://github.com/termi/DOM-Keyboard-Event-Level-3-polyfill" rel="noreferrer">DOM Keyboard Event Level 3 polyfill</a> . In latest browsers or with this polyfill you can do something like this:</p>

<pre><code>element.addEventListener("keydown", function(e){ console.log(e.key, e.char, e.keyCode) })

var e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, key : "Q", char : "Q", shiftKey : true});
element.dispatchEvent(e);

//If you need legacy property "keyCode"
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
delete e.keyCode;
Object.defineProperty(e, "keyCode", {"value" : 666})
</code></pre>

<p>UPDATE:</p>

<p>Now my polyfill supports legacy properties "keyCode", "charCode" and "which"</p>

<pre><code>var e = new KeyboardEvent("keydown", {
    bubbles : true,
    cancelable : true,
    char : "Q",
    key : "q",
    shiftKey : true,
    keyCode : 81
});
</code></pre>

<p>Examples <a href="http://jsfiddle.net/termi/yjc5F/" rel="noreferrer">here</a></p>

<p>Additionally here is cross-browser initKeyboardEvent separately from my polyfill: <a href="https://gist.github.com/4654819/" rel="noreferrer">(gist)</a></p>

<p>Polyfill <a href="http://h123.ru/-/tests/KeyboardEvent" rel="noreferrer">demo</a></p>


blocks|key|1322004|text|这是由于Webkit中的bug造成的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1322005|您可以使用createEvent('Event')而不是createEvent('KeyboardEvent')来解决Webkit错误，然后分配keyCode属性。参见this+answer和this+example。|style|CODE|1322006|entityMap|0|LINK|mutability|MUTABLE|url|https://bugs.webkit.org/show_bug.cgi?id=16735|1|https://stackoverflow.com/a/12522752/52207|2|http://jsbin.com/awenaq/3^0|C|3|0|0|5|K|S|S|20|7|2C|B|1|2O|C|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@$A|Y|B|Z|F|G]|$A|10|B|11|F|G]|$A|12|B|13|F|G]]|9|@$A|14|B|15|1|16]|$A|17|B|18|1|19]]|C|$]]|$1|H|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

<p>This is due to a <a href="https://bugs.webkit.org/show_bug.cgi?id=16735" rel="nofollow noreferrer">bug</a> in Webkit.</p>

<p>You can work around the Webkit bug using <code>createEvent('Event')</code> rather than <code>createEvent('KeyboardEvent')</code>, and then assigning the <code>keyCode</code> property. See <a href="https://stackoverflow.com/a/12522752/52207">this answer</a> and <a href="http://jsbin.com/awenaq/3" rel="nofollow noreferrer">this example</a>.</p>


blocks|key|1322096|text|我对此不是很在行，但是KeyboardEvent+=>请看KeyboardEvent是用initKeyEvent初始化的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1322097|以下是在<input+type="text"+/>元素上发出事件的示例|1322098|document.getElementById("txbox").addEventListener("keypress",+function(e)+{
++alert("Event+"+%2B+e.type+%2B+"+emitted!\nKey+/+Char+Code:+"+%2B+e.keyCode+%2B+"+/+"+%2B+e.charCode);
},+false);

document.getElementById("btn").addEventListener("click",+function(e)+{
++var+doc+=+document.getElementById("txbox");
++var+kEvent+=+document.createEvent("KeyboardEvent");
++kEvent.initKeyEvent("keypress",+true,+true,+null,+false,+false,+false,+false,+74,+74);
++doc.dispatchEvent(kEvent);
},+false);|code-block|syntax|javascript|1322099|<input+id="txbox"+type="text"+value=""+/>
<input+id="btn"+type="button"+value="CLICK+TO+EMIT+KEYPRESS+ON+TEXTBOX"+/>|1322100|​|1322101|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent^0|B|D|18|C|T|D|0|0|4|L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>I am not very good with this but <code>KeyboardEvent</code> => see <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" rel="nofollow">KeyboardEvent</a>
 is initialized with <code>initKeyEvent</code> .<br />
Here is an example for emitting event on <code>&lt;input type="text" /&gt;</code> element
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("txbox").addEventListener("keypress", function(e) {
  alert("Event " + e.type + " emitted!\nKey / Char Code: " + e.keyCode + " / " + e.charCode);
}, false);

document.getElementById("btn").addEventListener("click", function(e) {
  var doc = document.getElementById("txbox");
  var kEvent = document.createEvent("KeyboardEvent");
  kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74);
  doc.dispatchEvent(kEvent);
}, false);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="txbox" type="text" value="" /&gt;
&lt;input id="btn" type="button" value="CLICK TO EMIT KEYPRESS ON TEXTBOX" /&gt;</code></pre>
</div>
</div>
</p>


<p>I'm trying to simulate a keyboard event in Safari using JavaScript.</p>

<p>I have tried this:</p>

<pre><code>var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 115, 0);
</code></pre>

<p>...and also this:</p>

<pre><code>var event = document.createEvent("UIEvents");
event.initUIEvent("keypress", true, true, window, 1);
event.keyCode = 115;
</code></pre>

<p>After trying both approaches, however, I have the same problem: after the code has been executed, the <code>keyCode</code>/<code>which</code> properties of the event object are set to <code>0</code>, not <code>115</code>.</p>

<p>Does anyone know how to reliably create and dispatch a keyboard event in Safari? (I'd prefer to achieve it in plain JavaScript if possible.)</p>


Firing a Keyboard Event in Safari, using JavaScript

jQuery

我正在尝试使用JavaScript在Safari中模拟键盘事件。我已经尝试过了：var event = document.createEvent("KeyboardEvent");event.initKeyboardEvent("keypress", true, true, null, false, false, fa...

问使用JavaScript在Safari中激发键盘事件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript在Safari中激发键盘事件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript在Safari中激发键盘事件
EN