Execute triggered keypress javascript [duplicate]

Question

How to trigger keypress so that it simulates real user behavior?

If I use $('#input').trigger(jQuery.Event('keypress', {which: 65})) I expect the letter 'a' to appear in that input, but nothing appears even though the keypress is triggered.

Is it possible to display the pressed key without directly changing the input's value ?

Demo: http://jsfiddle.net/KrHYn/

Answer 1

Sorry but no, that's just not how DOM events work. When you trigger an event with JavaScript it is not a trusted event which means it does not (except for cases mentioned later here) change the DOM.

When you trigger a jQuery (or DOM) event, it's like the DOM is telling your JavaScript code that a key was pressed in the input. It usually doesn't change the DOM itself.

The only events that will perform the default behavior when triggered are click and DOMActivate according to the specification. From the spec:

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events. These events trigger the default action of an activation trigger (see Activation triggers and behaviors for more details); these untrusted events have an isTrusted attribute value of false, but still initiate any default actions for backwards compatibility.

All other untrusted events must behave as if the Event.preventDefault() method had been called on that event.

You'll have to change the input's value (.val() in jQuery).

Answer 2

Let's say the browser is separated in three parts: HTML, DOM and JavaScript. The DOM is the middle-man through which HTML and JS can talk.

When the JavaScript loads an element, when using document.getElementById, it tells the DOM: "Hey, I need this element!". If the DOM finds it, it returns the element in a special object called a DOM element.

When the HTML changes (you input some value into a field), it sends a message to the DOM: "Hey, my value is not the same over here.". And thus the DOM updates its DOM element.

When the JavaScript adds an event listener on keypress, it tells the DOM: "Hey, whenever a keypress event is sent, please tell me.".

So when the HTML changes (a keypress is done in an input), it tells the DOM: "Hey, there is a keypress event there!". And since the DOM knows that JS is waiting for updates on keypress events, it tells to JS: "Hey dude, an event was triggered there.".

If you run the event from JS itself, the DOM will send back right away to JS: "Hey, a keypress event was triggered, thought you might be interested.". It doesn't go to the HTML and changes it.

Why? Because the DOM doesn't trust the JS. It knows JS is a bad boy. The keyword here is "trust". As pointed out by @Benjamin, there are trusted events. Although very few of them. And there are the "trusted ones for backward compatibility".

Yes, the DOM is a mess.