Develop Reference

How to make input cancelable ? event.preventDefault();

I have an input field in my twig block. Now when I check to see if the event is cancelable, it returns false.
Is there any way to make it come true?
I've tried the 'change' event, but it's also false.
this._dataField.addEventListener('input', ()=> {
console.log('input');
this._onChange();
}
_onChange(event) {
console.log('onChange called');
var x = event.cancelable;
console.log(x);
}

The input event is not cancelable according to documentation:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

simulated call onMouseDown in console

There is a div element on the page, by clicking on it a menu with a choice of the displayed number of elements is created.
Menu:
How to call this action through the console (onMouseDown React)?
Code:

In the console you want to grab your element and then use a dispatch event to simulate a mouseover or click
var div = document.querySelector("#myDiv");
var myEventToDispatch = new MouseEvent("click"); //or "mousedown", whichever you need
div.dispatchEvent(myEventToDispatch);
These three lines in your console should do the trick.
Checkout: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent for more options

found a solution, works in practice. The menu implementation on the site consisted of several nested divs and one input. None of these elements responded to the click () function. The solution below solved my problem and the next steps I needed.
<pre><code>
var MENU = IFrame.contentDocument.getElementsByClassName("class box menu")[0]; // getElementsById, getElementsByTag[0] ....
MENU = MENU.getElementsByTagName("div");
var MaxList = MENU[1].getElementsByTagName("input")[0];
if(MaxList != undefined)
{
if(MENU[0].textContent != "100 items")
{
// focus menu
MaxList.focus();
var e = new KeyboardEvent(
"keydown",
{
bubbles : true,
cancelable : true,
key : "ArrowDown",
char : "ArrowDown",
shiftKey : true
}
);
// scroll down the list
MaxList.dispatchEvent(e);
MaxList.dispatchEvent(e);
MaxList.dispatchEvent(e);
// choice
e = new KeyboardEvent(
"keydown",
{
bubbles : true,
cancelable : true,
key : "Enter",
char : "Enter",
shiftKey : true
}
);
MaxList.dispatchEvent(e);
}
}
</code></pre>
VKomyak (Volt_Nerd)

event.altKey is not returning anything

I'am trying to show / hide a div if the Alt button is pressed. I'm listening to a keypress and using event.altKey to determine if alt/option was pressed. But this wasn't working. So I logged the event.
#HostListener( 'document:keypress', [ '$event' ])
handleKeyboardEvent( event: KeyboardEvent ) {
console.log( event.altKey );
}
In the above code if I pressed any number, alphabet or symbol it will print 'false' as expected. But when I press Alt, Ctrl, Shift, Tab nothing happens. It doesn't print true or false.
I also tried printing the keycode. It prints for everything but 'Alt, Ctrl, Shift, Tab'.
What am I doing wrong here?

Keypress doesn't detect some keys, and alt must be one of those keys. I would try using a different event called onkeydown. It can detect more keys. Here's more info on the keydown event: https://developer.mozilla.org/en-US/docs/Web/Events/keydown

you can the following function for alt key function :
function isKeyPressed(event) {
if (event.altKey) {
console.log("The ALT key was pressed!");
} else {
console.log("The ALT key was NOT pressed!");
}
}
and in your html use onkeydown="isKeyPressed(event)" as tag

You can try host property within #Component decorator.
#Component({
...
host: {
'(document:keypress)': 'handleKeyboardEvent($event)'
}
})
export class AppComponent {
handleKeyboardEvent(event: KeyboardEvent) {
console.log(event);
}
}
Angular recommend using #HostListener decorator over host property
https://angular.io/guide/styleguide#style-06-03

Programatically trigger keydown event with `which` property

How can I programatically trigger keydown event on Chrome that is going to have which property set to desired value?
tried
new KeyboardEvent('keydown', {
'which':65,
'charCode':65,
'keyCode':65,
'key':"a",
'code':"KeyA",
});
but when receiving the property in input's onKeyDown handler, the event has which,charCode and keyCode equal to 0. key is correctly set to a.

In Chrome, those event properties have default values of 0 and are not writable (due to their being deprecated). You have to delete the native properties and then re-create them:
var ke = new KeyboardEvent('keydown', {
'key':"a",
'code':"KeyA",
});
// Delete native event read-only properties with default values of 0
delete ke.keyCode;
delete ke.charCode;
delete ke.which;
// Create new custom properties that are read/write:
Object.defineProperty(ke, "keyCode", {"value" : 65});
Object.defineProperty(ke, "charCode", {"value" : 65});
Object.defineProperty(ke, "which", {"value" : 65});
var el = document.getElementById("key");
el.addEventListener("keydown", function(evt){
console.log(evt.key, evt.code, evt.keyCode, evt.charCode, evt.which);
});
el.dispatchEvent(ke);
<input type="text" id="key">

simulate ctrl + click with javascript or jquery (to open a new tab without focus)

I am playing with the jquery event object but I am stuck as hell
I read the API https://api.jquery.com/category/events/event-object/ but it's not really helping here, I am not even sure it's a good lead to do that
Do you have any suggestion ( the problem is to do the exact ctrl + click on a link). I saw some posts about it but nothing seems to work on the recent browsers
very simple exemple :
<span id="toto">toto</span>
// The goal is when I click on #toto, I would like #inANewTab trigger
// in a new tab without focus. To do that I was thinking
// about replicate a ctrl+click event
$('#toto').click(function(){
???
})

Edit:
The Event object in jQuery has a parameter for ctrlKey, you could assign that as true, on click.
var e = jQuery.Event("click");
e.ctrlKey = true;
$('#id').trigger(e);
Reference: jquery trigger ctrl + click

In pure javascript, you can use the MouseEvent for that:
document.getElementById("todo").dispatchEvent(new MouseEvent("click", {ctrlKey: true}));
To programatically open a new tab you can do that:
const a = document.createElement("a");
a.setAttribute("href", "https://www.google.com/");
a.dispatchEvent(new MouseEvent("click", {ctrlKey: true}));

This is a non-jQuery version to simulate keyboard events. This works in both Chrome (WebKit based) and Firefox (Gecko based):
var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
keyboardEvent[initMethod](
"keydown", // event type : keydown, keyup, keypress
true, // bubbles
true, // cancelable
window, // viewArg: should be window
false, // ctrlKeyArg
false, // altKeyArg
false, // shiftKeyArg
false, // metaKeyArg
40, // keyCodeArg : unsigned long the virtual key code, else 0
0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);
Or using jQuery, you can simulate by jQuery's event object:
jQuery.event.trigger({
type: 'keypress',
which: character.charCodeAt(0)
});