We Keep Coding

Programmatically simulate spacebar then backspace on a text input field

I want to dispatch user actions on a text input field. I want it to be as if an actual person has used their keyboard to click a text input field, hit the spacebar, and then hit the backspace key. With the code I used nothing has happened.
THE JSFIDDLE https://jsfiddle.net/zvrhfq9j/
THE HTML
<input type="text" name="psychTree-savedNodes" style="width:20%" />
THE JS
$('input[name="psychTree-savedNodes"]').focus();
$('input[name="psychTree-savedNodes"]').trigger({type: 'keypress', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keyup', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keydown', which: 32, keyCode: 32});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keypress', which: 8, keyCode: 8});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keyup', which: 8, keyCode: 8});
$('input[name="psychTree-savedNodes"]').trigger({type: 'keydown', which: 8, keyCode: 8});
THE SOLUTION: was to actually dispatch the events. Thanks for those that actually answered!

You can simulate user actions, but they won't perform the default functions because it will set isTrusted to false (for security reasons).
For instance, you can build an event to dispatch to a text field that "types the letter 'a'". It will (err, should) trigger any custom functions bound to that event handler (el.onkeydown(e){ if( e.key == 'a' ) …), but it will not type the letter a into the text field, or otherwise process default browser functionality based on that keystroke.
It's a browser implementation, and not something you can get around. So while you can't "type" directly into fields, you can run events based off the event handlers that are attached to those specific events.
I've whipped up a codepen example to show what I mean: https://codepen.io/xhynk/pen/jOPbWzz
The page loads blue, with 2 fields
In 1 second, it will run a function that "simulates" a "click > space > backspace" chain of events.
The events will display what they did inside the "no" input
The page turns green to show it went off.
If you're so inclined, you can change the event codes to letters to see that the actual keystrokes never appear in the "yes" input. I've added the "no" box that has keydown and onclick event handlers to show what events fired and in what order by changing the value of it.
You can also manually click on the "yes" input, then hit "space" and "backspace" and see they too fire the event handler functions (the event functions will run like they did when they were simulated) but this time they will actually show up in the box (because you actually did them, so they are trusted events).
Long story short, you can't fully simulate "typing" keypress events that are trusted, but you can handle those specific keypress events however you want (even changing the value of the current input if you so choose).
Edit: I see a chain of comments has spawned up at the top. This is a browser function that you can't get around, unless you find (or build) a browser that handles untrusted isTrusted:false events. This doesn't have anything to do with local or sandbox programming environments.

in google search box which event fire?

in google search box when we typing something , On that time some auto complete result coming after select any one it automatically fire no need to
focusout()
or
any click()
how it create

There are basically three key related events keydown, keypress and keyup, it is using combination of these events... To make you understand more here is the detail
keydown is fired when the key is down (like in shortcuts; for example, in Ctrl+A, Ctrl is held 'down'.
keyup is fired when the key is released (including modifier/etc keys)
keypress is fired as a combination of keydown and keyup, or depending on keyboard repeat (when keyup isn't fired). (this repeat behaviour is something that I haven't tested. If you do test, add a comment!) If user keep key pressed, then this event is fired for every character added by the browser.
NOTE: Remember one thing, if you are fetching the value from the field never ignore the keyup event, because while getting text of the input you won't get the last type character from the textfield until keyup event is fired...
See this fiddle to get more idea about key events..

How to know if the key up event has been already done its job or not in the event handler

I have a key up event handler for a text box.
In that event handler I am checking for the key code 46/8 (Back space/Delete). And am getting the resulted value of the text box after these keys are pressed.
Lets say my textbox has 1234 and I want to get the value of the the text box in the event handler after deleting the last character. That mean I need 123 but when I read the value of the textbox it still shows 1234. How can I read the value of the text box after the event has done its job?

You want the keyup event:
The keydown, keypress and keyup events fire when the user presses a key.
keydown
Fires when the user depresses a key. It repeats while the user keeps the key depressed.
keypress Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.
keyup
Fires when the user releases a key, after the default action of that key has been performed.
Source

since you have no related code posted.. i am assuming (with what you have mentioned)
That mean I need 123 but when I read the value of the textbox it still shows 1234.
.. you are using keydown event...
use keyup
$('#inputID').keyup(function(){
alert($(this).val());
});

I assume, you have a code like below.
$('input').keyup(function (e) {
if (e.keyCode == 46 || e.keyCode == 8) {
alert($(this).val())
}
})
It will return value after the key is pressed.

Capturing key event for backspace

I am having difficulty capturing the backspace key as a keyboard Event in javascript/jQuery. In Firefox, Safari, Opera, Chrome, and on the iPhone/iPad, I capture a keyup event on a text input box like this:
$(id_input).keyup(function(event) {
that.GetHints($(this).val().trim(), event, fieldName);
});
This event captures user keystrokes, then sends them to a function to issue an ajax lookup call.
My problem comes when a user wishes to backspace over a character he/she already typed. In all the browsers to which I have access except for my Droid phone, when I press the backspace key, this keyup event captures the value returned by $(this).val().trim() and sends it on to process in function GetHints. On the Droid, however, neither this keyup nor an equivalent keydown event fires until the user backspaces over every character in $(this).
So, for example, if I type "cu" then backspace over the "u" leaving only "c" in the input field, in all browsers except Droid, the keyup event will fire and call function GetHints("c", event, fieldName). On the Droid, the keyup event never fires.
What am I missing? How/why does this backspace key, on either the soft keyboard or the hard keyboard, on my Droid not function as expected? How do I work around this?

You could poll for changes in the text (using setInterval). This would probably be more reliable. For example, keyup wouldn't fire if the user does right-click -> cut. Polling alone would be less responsive, but you could combine it with keyup to keep it snappy. Polling would be a bit more processor heavy.
Try something along these lines:
var oldText = '';
var timer = setInterval(function(){
var text = $(id_input).val().trim();
if(text != oldText){
oldText = text;
that.GetHints(text, fieldName);
}
}, 500);
Tweak the interval duration as necessary.
I'm not sure what that.GetHints does with event, but obviously, you wouldn't be able to pass that in using the polling approach (because there isn't an actual event being fired). Is this a problem?
You can use clearInterval(timer); to stop polling if you want to.
You could keep your existing keyup function as it is (to increase responsiveness). Alternatively, you may wish to just poll to avoid that.GetHints being called too much (e.g. if someone types something in really quickly).

keypress event not being triggered only at start and end of text field in Firefox (JQuery)

I'm listening for keypress events on an input field with delegation. For some reason, Firefox doesn't trigger the delegated event for cursor UP when at the start of the field, or cursor DOWN when at the end. LEFT and RIGHT work as expected all the time.
Directly binding an event listener to the field works fine, so it has to be something to do with delegation. Does anyone know if this is a know issue, I couldn't find anything on Google/forums etc..?
$("div").delegate(":input", "keypress", function(e){
// doesn't get triggered
});
$("div :input").bind("keypress", function(e){
// gets triggered fine
});
Here's a demo which shows the issue - http://livsey.org/jquery.delegation.html

These keys don't bubble in Firefox, at least not in that case, so .delegate() or .live() won't work. This is a known issue, better to use a different event in this case, like keydown or keyup, you can see the jQuery documentation for .keypress() for a quick blurb about this:
Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.
Updating your code to this works:
$("div")().delegate(":input", "keyup", function(e){
log("delegated: "+e.keyCode);
});
$("div :input").bind("keyup", function(e){
log("bound: "+e.keyCode);
});