Simulate typing into input field
Demo how to simulate user entering text into an input field, to be used in e.g. in Jasmine tests that check if controlling user input works properly
HTML
<input>
<button onclick="simulateKeys()">simulate Keys</button>
<ul></ul>
JavaScript
input$(document).ready(function () {
$("input").on({
"keypress": function(e) {
}
}"keypress", function (event) {
if (event.keyCode === 121) {
alert("Fool! Don't be clickin da Y button!");
event.preventDefault();
}
});
$("button").on("click", function (event) {
typeIntoInput($(this).val());
});
var typeIntoInput = function (char) {
var event = jQuery.Event("keypress"),
$input = $("input");
// thanks to Ata on StackOverflow
// http://stackoverflow.com/questions/596481/simulate-javascript-key-events
event.altGraphKey = false;
event.altKey = false;
event.bubbles = true;
event.cancelBubble = false;
event.cancelable = true;
event.charCode = char.charCodeAt(0);
event.clipboardData = undefined;
event.ctrlKey = false;
event.currentTarget = $input;
event.defaultPrevented = false;
event.detail = 0;
event.eventPhase = 2;
event.keyCode = char.charCodeAt(0);
event.keyIdentifier = "";
event.keyLocation = 0;
event.layerX = 0;
event.layerY = 0;
event.metaKey = false;
event.pageX = 0;
event.pageY = 0;
event.returnValue = true;
event.shiftKey = false;
event.srcElement = $input;
event.target = $input;
event.type = "keypress";
event.view = window;
event.which = char.charCodeAt(0);
$input.trigger(event);
if (!event.isDefaultPrevented()) {
$input.val($input.val() + char);
}
}
});