How to visually simulate a keyboard key presses programmatically on a web page input field, using JavaScript and jQuery?

Question

I want to automate the login process on a website. This website login page has a username <input> field with id="username", and type="email", and a password <input> field with id="pwd", and type="password", and a submit button <input> field with id="login", and type="submit".

This website has some built-in JavaScript that handle the keyboard keydown/keyup/input events, they validate the entered characters in the username input field, so that the entered characters must be of xxx@xxx format before initiating the login request.

In my script, I first tried this using jQuery:

$("#username").val("me@hotmail.com");
$("#pwd").val("ticket");
$("#login")[0].click();

This can correctly populate the username field with "me@hotmail.com", but the problem with this approach is the validation code in the built-in script does not get triggered, thus the login failed.

Then I tried these by simulating entering these characters, "a@h":

$('#username').trigger(jQuery.Event('keydown', {KeyCode: 97}));  
$('#username').trigger(jQuery.Event('keyup', {KeyCode: 97}));  
$('#username').trigger(jQuery.Event('keydown', {KeyCode: 64}));  
$('#username').trigger(jQuery.Event('keyup', {KeyCode: 64})); 
$('#username').trigger(jQuery.Event('keydown', {KeyCode: 104}));  
$('#username').trigger(jQuery.Event('keyup', {KeyCode: 104}));

I can see that these events get triggered successfully by adding event listeners on this field,

$("#username" ).on( "keydown", function(e) { console.log('    key downed: ' + (e.which || e.KeyCode ) ); });
$("#username" ).on( "keyup", function(e) { console.log('    key upped: ' + (e.which || e.KeyCode ) ); });

I can see the log messages, then I removed the above listeners, because they would overwrite the website built-in event handlers on this input field.

When I ran the above code, I can NOT visually see "a@h" in the input although these events get triggered successfully based on the log messages, and the login still failed.

I was testing this on the Chrome browser, I opened the Chrome debugging tools, and enabled Keyboard/keydown/keyup events breakpoint in the "Event Listener Breakpoints" pane. But when I ran the code, those breakpoints did not break, so the built-in validation code did not execute, thus the login still failed.

My question is this:

How do I code the event triggering logic, so that when those events get triggered, the website built-in event handler could be executed, plus, I can visually see those entered characters in the uesrname input field, just as if the computer has been hacked, and you are watching the hacker entering characters into the input field in real-time.

Answer 1

I searched google and came up with the following from other relevant StackOverflow answers:

• https://stackoverflow.com/a/2220234/5076162 by Max Shawabkeh
• https://stackoverflow.com/a/17881330/5076162 by Paul S.

I take no credit for their work, only that I merged the two methods with a little bit on ingenuity. So please up vote their work before you accept my answer.

Working jsfiddle example: Test Typed automatically

jQuery.fn.simulateKeyPress = function (character) {
  // Internally calls jQuery.event.trigger
  // with arguments (Event, data, elem). That last arguments is very important!
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};

jQuery(document).ready(function ($) {
  // Bind event handler
  $('textarea').keypress(function (e) {
    //alert(String.fromCharCode(e.which));
    console.log(String.fromCharCode(e.which));
    var initialVal = $(this).text();
    var newVal = initialVal.toString() + String.fromCharCode(e.which);
    $(this).text(newVal);
    console.log("New Value: " + newVal);
    //String.fromCharCode(e.which)
  });
  // Simulate the key press
  $('textarea').on('focus', function(e) {
  //this could have been done with a for loop or the jQuery $.each() method by utilizing strings and arrays.
    $(this).simulateKeyPress('t');
    $(this).simulateKeyPress('e');
    $(this).simulateKeyPress('s');
    $(this).simulateKeyPress('t');
  });
  $('textarea').focus();  
});

Answer 2

There's a .checkValidity() API on HTML5 form fields you can use for this purpose. Fill it in with .val() as you were, and the call the checkValidity method on the raw DOM node to trigger the browser's built-in handling. More info: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML

Answer 3

I tried these at Chrome console:

document.getElementById("i0116").value = "h@hotmail.com"  
document.getElementById("i0118").value = "123456"  
document.getElementById("i0116").checkValidity();  
document.getElementById("idSIButton9").click();  

Although, checkValidity() returns true, the keydown/up events handler in the site script are still not triggered, the login still failed, it reports error "Please enter your phone number or your email address in the format someone@example.com".

There has to be a way I can programmatically simulate key presses in the input to trigger the validation script.

The site I'm testing is https://login.live.com, the username input has a default overlay of "Email or phone" text on it.

document.getElementById("i0116").value = "h@hotmail.com" would just overlap "Email or phone" with another layer of text "h@hotmail.com" into the input field.

Open "https://login.live.com/" in Chrome, you will see what I mean.