We Keep Coding

Override default keydown event in VanillaJS

Been trying to search around for the most efficient way to override a default keydown event in VanillaJS. In my case specifically, I'm trying to override the default event of the "backspace" key and give it the functionality of a left-arrow key.
I figured out how to use event.preventDefault() to stop the default event from happening, with this code:
document.querySelector(/* Target selector */).onkeydown = checkKey;
function checkKey(event) {
let which = event.which;
let keyCode = event.keyCode;
let charCode = event.charCode;
if(which == 8 || keyCode == 8 || charCode == 8) {
event.preventDefault();
}
}
But, I can't seem to assign a new event. I've been working with something along these lines, but I have a feeling I'm way off:
document.querySelector('#blank-page').onkeydown = checkKey;
function checkKey(event) {
let which = event.which;
let keyCode = event.keyCode;
let charCode = event.charCode;
if(which == 8 || keyCode == 8 || charCode == 8) {
which == 37;
keyCode == 37;
charCode == 37;
}
}
Does createEvent() possibly come into play here?

I don't know if this will be everything you need but you can use dispatchEvent on the element you want to trigger the event.
You could use it as follows:
JavaScript
window.onload = function(){
document.querySelector('#my-input').onkeydown = checkKey;
}
function checkKey(event) {
console.log(event);
let which = event.which;
let keyCode = event.keyCode;
let charCode = event.charCode;
if(which == 8 || keyCode == 8 || charCode == 8) {
console.log(event.target);
//dispatch a keydown event on the input element where the Backspace key was pressed.
event.target.dispatchEvent(new KeyboardEvent('keydown', {'keyCode': 37, 'key': 'ArrowLeft', 'code': 'ArrowLeft'}));
}else if(keyCode == 37){
//Added this if statement to check that the ArrowLeft keydown event was dispatched.
console.log(event);
}
}
HTML
<input type="text" value="" id="my-input" name="my-input">

Tabs default action is not stopped event though i use e.preventDefault()

I am showing a text area in a modal when I pressed tab it moves to the next input I wrote code to stop this but I didn't work for me.(when I pressed tab the execution even not coming to the acceptTabsSpace function)
$(document).on("keyup", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
return false;
}
}

Add the listener to trigger on keydown instead:
$(document).on("keydown", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e){
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
e.preventDefault();
return false;
}
}

Use keydown instead key up and for tabspaces press tab twice.
$(document).on("keydown", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e) {
var keyCode = e.keyCode || e.which;
if (e.keyCode === 9) {
e.preventDefault();
this.value = this.value.substring(0, this.selectionStart) + "\t" +
this.value.substring(this.selectionEnd);
this.selectionEnd = s + 1;
}
}

Javascript addListner mousedown all events other than key up and down is working

I have a listner on a table row like follows:
row.addEventListener("mousedown",function(e){
var event = e || window.event;
RowClick(this,false,event);
});
and in my row click I have written as follows:
function RowClick(currenttr, lock,event) {
var key = event.keyCode || event.which;
if (event.ctrlKey) {
toggleRow(currenttr);
}
if (event.button === 0) {
if (!event.ctrlKey && !event.shiftKey) {
clearAll();
toggleRow(currenttr);
}
if (event.shiftKey) {
selectRowsBetweenIndexes([lastSelectedRow.rowIndex,currenttr.rowIndex])
}
}
//up down arrows
if((key == 38 || key == 40)&& !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey){
alert("here");
}
}
All the key events other than up down arrow key events are working.
if((key == 38 || key == 40)&& !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey){
alert("here");
}
is not working. Other keys like Shift , Control's actions are working!!

The mousedown event does not includes data on regular keys which have been down when the event has occurred. The event only contains data on a spacial mask keys: ctrl, shift, alt and meta.
The event does not contains keyCode key, so you would always get undefined and the which key is dependent on the type of the click (left button: 1, right button: 3).
So after you run this code:
var key = event.keyCode || event.which;
key will always be equal to event.which so it never has the value 38 or 40.
See this for which properties does the mousedown event contains.
A possible solution is to track the keys that are currently down:
var keysDown = [];
document.addEventListener("keydown",function(e){
keysDown.push(e.keyCode || e.which);
}
document.addEventListener("keyup",function(e){
var index = keysDown.indexOf(e.keyCode || e.which);
if (index > -1) {
array.splice(index, 1);
}
}
and in your RowClick function:
if((keysDown.indexOf(38) > -1 || keysDown.indexOf(40) > -1) && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey){
alert("here");
}
You can also use boolean flag which indicates if the keys you want are down, instead of an array of all the keys which are down.

event.returnvalue=false is not working in firefox?

I am working on an old application to make it compatible with firefox. As the old application does not uses Jquery I have to do all my stuffs using Javascript only.
I have a input field for entering date.This field should only allow 0-9 numeric values. So I have modified the code like this for making it compatible with firefox.
var event = window.event || ffEvent ; //ffEvent is the function argument
var intKeyCode = event.keyCode || event.which;
if (intKeyCode < 48 || intKeyCode > 57){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue = false;
}
}
But now the problem is event.returnValue = false allows keys like Backspace,Tab,Delete,Arrow buttons where as event.preventDefault() does not allow these buttons. One must allow these buttons for a input field.
So is there any solutions for firefox which exactly behave same as event.returnValue=false

why not use the keyCodes to check if the character is digit or not
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
var event = window.event || ffEvent ; //ffEvent is the function argument
var intKeyCode = event.keyCode || event.which;
if (intKeyCode > 31 && (intKeyCode < 48 || intKeyCode > 57))
return false;
return true;
}
in the keypress of input field call this event, as
onkeypress="return isNumberKey(event)

All you need to do is skip the event.preventDefault() when the key is one of the keys you want to allow:
window.onload = function () {
document.getElementById('myField').onkeypress = function (event) {
var keyCode = event.keyCode || event.which,
allowedKey = keyCode === 8 || // backspace
keyCode === 9 || // tab
keyCode === 13 || // enter
keyCode === 37 || // left
keyCode === 39 || // right
keyCode === 46 || // del
(keyCode >= 48 && keyCode <= 57);
if (!allowedKey) {
event.preventDefault();
}
};
};
<input type="text" id="myField" />

Disable backspace and delete key with javascript in IE

Anyone know how can I disable backspace and delete key with Javascript in IE? This is my code below, but seems it's not work for IE but fine for Mozilla.
onkeydown="return isNumberKey(event,this)"
function isNumberKey(evt, obj)
{
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode == 8 || charCode == 46) return false;
return true;
}

This event handler works in all the major browsers.
function onkeyup(e) {
var code;
if (!e) var e = window.event; // some browsers don't pass e, so get it from the window
if (e.keyCode) code = e.keyCode; // some browsers use e.keyCode
else if (e.which) code = e.which; // others use e.which
if (code == 8 || code == 46)
return false;
}
You can attach the event to this function like:
<input onkeyup="return onkeyup()" />

update based on #JoeCoders comment and the 'outdatedness' of my answer, I revised it.
document.querySelector([text input element]).onkeydown = checkKey;
function checkKey(e) {
e = e || event;
return !([8, 46].indexOf(e.which || e.keyCode || e.charCode) > -1);
}
See also this jsFiddle

This code cancels backspace action.
window.onkeydown = function (event) {
if (event.which == 8) {
event.preventDefault(); // turn off browser transition to the previous page
// put here code you need
};
};

$(document).keydown(function(e) {
if (e.keyCode === 8) {
var element = e.target.nodeName.toLowerCase();
if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly")) {
return false;
}
}
});