We Keep Coding

How to trigger arrow down press in js?

I have this code that fills and focuses but I need to add an arrow down event as it will trigger list popup like pictured below. Can anyone help me with the line?
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '16048'
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").focus()
})
})();

You can use the KeyboardEvent API. Use the keyup or keydown event - depending on which one suits you better, and look up the keycode (the arrow down keycode is 40). When the key is pressed, the event will trigger. You can use the website to check which keycode is linked to which key on the keyboard by clicking here.
I got the code below from the MDN web docs.
eventTarget.addEventListener("keyup", event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});

Not enough information. It might be better to provide full HTML...
(A bit connected question: Script to fill a value automatically in the webpage input box)
1 - The goal here is to get class of the suggestion dropmenu. And find children inside, and maybe another children inside, and then trigger click() on it.
Since it is pretty hard to guess the class names and the structure, here is a pretty much equal example of how to click on drop-down suggestion.
a) Here is Wikipedia. Open the link.
https://en.wikipedia.org/wiki/Stack_Exchange
b) Save the following code as a bookmarklet:
javascript:(function(){
document.getElementsByClassName('suggestions')[0].children[0].children[1].click();
})();
c) Then write three letters goo to the search in Wikipedia.
d) And finally trigger the bookmarklet. Then it will open up the second suggested link: children[1]. This is how it may work. You might try like this with your HTML on your own.
2 - There is a chance that making a bookmarklet might be a slightly better than appending an event listener, since all you need is to insert values.
Another option is Tampermonkey / Greasemonkey to trigger things even more automatically (in fact, this option is pretty much the same as a bookmarklet, and the code structure is absolutely the same and fully compatible).

How to detect rightclick + cut/delete/paste/undo in javascript?

In my JavaScript/jQuery code, I have a text field that I run an event when the text changes using the keyup event. However currently I only account for changes done using the keyboard.
Is there a way I can detect when a text field text changed because the user did a right click and clicked on cut or delete or paste or undo?
Note: This needs to work in IE9, and preferably Firefox and chrome, but definitely needs to work in IE9.
Thanks

jsFiddle Demo
Use jquery to bind an input event to the element like this:
$('#myInput').bind('input',function(){
//use this for the input element when input is made
var inputValue = this.value;//for example
});

As a start, this is not really the correct way to do it. But if you react on the mouseout event of a input you will most likely get it to behave the way you want.
$('#input').mouseout(function(){
if($('#input').is(":focus"))
console.log("Right-click");
});
Though it is to note that this might not work as well on textareas since they tend to be larger and the mouse might not be outside of it when the contextmenu has been clicked.
Note: Other than #Travis J that react to all interaction, this will (probably) only trigger an event on rightclick (and regular mouseout).

Simulate Holding Ctrl Key

I'm currently trying to change the default behaviour of a multiselect element, so that a user can select and deselect multiple values, without having to press the Ctrl key all the while.
I found a simple solution here, but this does not work in ie8 (because in ie, the onmousedown does not apply to option elements).
But I figured, that one could just simulate a pressed control key, whenever the mouse hovers over a multiselect:
$(document).ready(function() {
$('select').hover(function(e) {
var kde = jQuery.Event("keydown");
kde.ctrlKey = true; //something like this
kde.keyCode = 17; //or this - i don't know
$(e.target).trigger(kde);
});
});
Why does this not work?
Is the Ctrl key directly being released again?
Is something wrong with the code?
Am I missing something else entirely?

You can't simulate such events by programmatically pushing keyboard buttons, just like you can't produce a capital A by simulating the shift key while the user pushes the a key on their keyboard. Besides, even if it would work it wouldn't work: on Macs you press cmd, not ctrl, to select multiple elements.
So unfortunately you'll have to drop this approach and look for other options.

You probably need to add a check box for each of your items, rather than a multi select control.
It is easier in code to write functions which uncheck the others when a new one is selected than to prevent this default behaviour.

Forwarding an event to another element using jQuery

I'm making a grid control in HTML/JS and I'd like it to behave as much as possible like Excel. I've got most of the navigation and editing done already but there's one thing I can't figure out and everything I've found online didn't work in my case.
First I'm going to explain a bit how I've implemented it:
I've made the grid using a table and inserted a textbox in each td. The textboxes do not get the focus unless you double click in the cell (much like in Excel). In other words, clicking a cell simply select it and you can edit it by double clicking. You can navigate around by using the arrow keys, this was done by attaching a keypress event handler on the document.
Now, when a cell is selected, I'd like to be able to start editing it simply by typing. To do this, I added some code in my event handler that controls the navigation that checks if the user is typing visible characters (e.charCode != 0) and set the focus in the textbox of the selected cell. That works fine except that the first character the user types isn't received by the textbox. Apparently .trigger is the way to go; here's what I've tried so far
self.editCell.trigger(jQuery.Event('keypress', {which: e.charCode}));
I tried passing more parameters like keyCode, charCode... etc without success.
So what would be the best way to pass the keystroke to the input control?

The only behavior that you are changing is that you want to navigate between other cells with the arrow keys, correct?
Instead of whitelisting actions, why don't you just let the native code handle the heavy lifting and only detect the usage of the arrow keys?
something like:
function cellKeyDown(e) {
if (e.keyCode > 36 && e.keyCode < 40) {
// select a new cell
}
}

.keyup not firing for delete of first char in input field

Strange phenomenon detected with JQuery 1.4.4 for FireF, Chrome, Safari (IE untestested).
Aim: update a list while the user types a filter value into a simple, basic text-input-box.
Solution: bound keyup event, read out the value of the input-field, apply the filter... roughly:
$("#myinputfield").keyup(function(e) { myList.filter($(this).val()) });
it works perfectly for both typing and deleting EXCEPT for when deleting (del or backspace same effect) the last remaining (==first) char. in that case the event does not fire at all.
Anybody with an idea on what the problem is and/or how to solve it?
(p.s.: My solution would be to change from keyup event binding to a setTimeout periodical check as long as the input-field has focus, but that koxind of feels like a dirty escape...)

I cannot reproduce your problem. Perhaps it is just that your filter function does not handle $(this).val() == '' very well. Check out this quick test.