Move this topic
Simulating keypress events?
Answered
- Need more info
- Working on it
- Answered
in QUnit and Testing
•
11 years ago
I know that I can use jQueryObj.trigger('keypress') to simulate a key press event, but how can I populate the keypress event attributes? I am testing an autocomplete plugin which of course requires simulating keystrokes.
1
Replies(5)
Re: Simulating keypress events?
11 years ago
Create a new jQuery.Event object and then trigger that. I just noticed that the docs for .trigger() don't say you can pass an Event object but you can. We'll need to fix that.
http://api.jquery.com/category/events/event-object/
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 40;
... any other event properties ...
$("whatever").trigger(press);
+1 for testing!
http://api.jquery.com/category/events/event-object/
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 40;
... any other event properties ...
$("whatever").trigger(press);
+1 for testing!
Leave a comment on dave.methvin's reply
Re: Simulating keypress events?
11 years ago
You could also use the simulate plugin, which currently lives in the jQuery UI repository. Our unit tests for the autocomplete widget demonstrate the usage quite well.
autocomplete.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
Re: Re: Simulating keypress events?
11 years ago
This looks very intriguing. Are the '$.ui.keyCode' values documented anywhere?
Leave a comment on joern.zaefferer's reply
Re: Simulating keypress events?
11 years ago
With Zoern's help, I was able to get my keystroke-based testing working properly. I developed the following helper methods which others might find useful. (Note that these require the jquery.simulate plugin, mentioned by Zoern.)
Note that I wrote this code literally in the last hour, so there may be issues, and it's likely not yet complete, but it may help someone else out. CRITICISM WELCOME!
var HTML5_TEXT_INPUT_FIELD_SELECTOR =
'input:text,input:password,input[type=email],' +
'input[type=number],input[type=search],input[type=tel],' +
'input[type=time],input[type=url]';
/**
* Utility function to trigger a key press event for each character
* in a string. Each character will be triggered 'keyTiming'
* milliseconds apart. The onComplete function will be called
* 'keyTiming' milliseconds after the last key is triggered.
*/
function triggerKeyEventsForString(field, str, keyTiming,
triggerFocus, onComplete) {
if (field && str) {
field = $(field);
triggerFocus = Boolean(triggerFocus);
if (triggerFocus) {
field.trigger('focus');
}
var keyCode = str.charCodeAt(0);
triggerKeyEvents(field, keyCode);
if (str.length > 1) {
setTimeout(function() {
triggerKeyEventsForString(field,
str.substring(1),
keyTiming, false,
onComplete);
}, keyTiming);
}
else {
if (jQuery.isFunction(onComplete)) {
setTimeout(function() {
onComplete(field);
}, keyTiming);
}
}
}
}
/**
* Utility function to trigger a key event for a given key code.
*/
function triggerKeyEvents(field, keyCode, shiftKey, ctrlKey) {
field = $(field);
shiftKey = Boolean(shiftKey);
ctrlKey = Boolean(ctrlKey);
field.simulate("keydown", { keyCode: keyCode,
ctrlKey: ctrlKey,
shiftKey: shiftKey });
field.simulate("keypress", { keyCode: keyCode,
ctrlKey: ctrlKey,
shiftKey: shiftKey });
if (field.is(HTML5_TEXT_INPUT_FIELD_SELECTOR)) {
applyKeyCodeToValue(field, keyCode);
}
field.simulate("keyup", { keyCode: keyCode,
ctrlKey: ctrlKey,
shiftKey: shiftKey });
}
/*
* Internal function to simulate a key being typed into an edit
* field for testing purposes. Tries to handle cases like
* 'backspace' or 'arrow key'. It's assumed that the cursor is
* always at the end of the field.
*/
function applyKeyCodeToValue(field, keyCode) {
field = $(field);
if ((keyCode >= 32) && (keyCode <= 126)) {
field.val(field.val() + String.fromCharCode(keyCode));
}
else {
switch(keyCode) {
case 8: // Backspace
var val = field.val();
if (val.length) {
field.val(val.substring(0, val.length - 1));
}
break;
default:
break;
}
}
}
Leave a comment on lenscraft's reply
Re: Simulating keypress events?
9 years ago
I know this is an old topic but just in case someone stumbles on this:
There is a project providing simulation of complex user interactions (like key press sequences) based on jquery.simulate.js: https://github.com/j-ulrich/jquery-simulate-ext
Disclaimer: I'm the author. 

Leave a comment on j.ulrich's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to lenscraft's question