We Keep Coding

error message still showing when i press backspace(e.which ==8)

This is the code.
i just want to hide message when i press backspace key, i don't know why it is not going away on backspace other than that it works fine.
//on keypressed in textbox
$(".phone").keypress(function (e) {
if (e.which == 8 ){
$(".errmsg").hide();
}
//if not numeric, then it don't let you type
if (e.which != 8 && e.which != 43 && e.which != 45 && (e.which < 48 || e.which > 57)) {
debugger
//display error message
$(".errmsg").html("Digits Only").show();
e.preventDefault();
} else {
debugger
$(".errmsg").hide();
}
});

Please use keyup and keydown events to handle this.
//on keypressed in textbox
$(".phone").on('keyup keydown', function(e) {
if (e.which == 8) {
console.log('backspace key pressed');
}
//if not numeric, then it don't let you type
if (e.which != 8 && e.which != 43 && e.which != 45 && (e.which < 48 || e.which > 57)) {
//display error message
$(".errmsg").html("Digits Only").show();
e.preventDefault();
} else {
$(".errmsg").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="phone" />

how can i use capslock function on a virtual keyboard using javascript if the textarea that handles the string value is readOnly?

i have used this code but it only detects if the capslock is on or off.
$(function () {
var isShiftPressed = false;
var isCapsOn = null;
$("#txtName").bind("keydown", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = true;
}
});
$("#txtName").bind("keyup", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = false;
}
if (keyCode == 20) {
if (isCapsOn == true) {
isCapsOn = false;
$("#error").hide();
} else if (isCapsOn == false) {
isCapsOn = true;
$("#error").show();
}
}
});
$("#txtName").bind("keypress", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
$("#error").show();
} else {
$("#error").hide();
}
});
});
but this is not functioning if the textarea that hold the value is in readOnly state.
how can i fix it?

replace
$("#txtName")
with
$('body')

You could use onkeypress instead of onkeydown. The latter only detects which key was pressed; the former (even though counter-intuitively its name includes 'keypress') will give you the char. This link explains in detail: http://unixpapa.com/js/key.html Note that onkeypress is not supported by all browsers.
Also, your code for converting charcode to char is inefficient, and you're converting uppercase charcodes to lowercase chars. Here's some code that listens for key presses and on each one, alerts the user which char was pressed.
document.onkeypress = function(event){
event = event || window.event;
var key = event.keyCode;
alert(String.fromCharCode(key));
}

if (event.keyCode == "65"){
document.getElementById("txtInput").value+=val1;
btnA.style.backgroundColor="#00bfff";
}
if (event.keyCode == "66"){
document.getElementById("txtInput").value+="b";
btnB.style.backgroundColor="#00bfff";
}
if (event.keyCode == "67"){
document.getElementById("txtInput").value+="c";
btnC.style.backgroundColor="#00bfff";
}
if (event.keyCode == "68"){
document.getElementById("txtInput").value+="d";
btnD.style.backgroundColor="#00bfff";
}
if (event.keyCode == "69"){
document.getElementById("txtInput").value+="e";
btnE.style.backgroundColor="#00bfff";
}
if (event.keyCode == "70"){
document.getElementById("txtInput").value+="f";
btnF.style.backgroundColor="#00bfff";
}
if (event.keyCode == "71"){
document.getElementById("txtInput").value+="g";
btnG.style.backgroundColor="#00bfff";
}
if (event.keyCode == "72"){
document.getElementById("txtInput").value+="h";
btnH.style.backgroundColor="#00bfff";
}
if (event.keyCode == "73"){
document.getElementById("txtInput").value+="i";
btnI.style.backgroundColor="#00bfff";
}
if (event.keyCode == "74"){
document.getElementById("txtInput").value+="j";
btnJ.style.backgroundColor="#00bfff";
}
if (event.keyCode == "75"){
document.getElementById("txtInput").value+="k";
btnK.style.backgroundColor="#00bfff";
}
if (event.keyCode == "76"){
document.getElementById("txtInput").value+="l";
btnL.style.backgroundColor="#00bfff";
}
if (event.keyCode == "77"){
document.getElementById("txtInput").value+="m";
btnM.style.backgroundColor="#00bfff";
}
if (event.keyCode == "78"){
document.getElementById("txtInput").value+="n";
btnN.style.backgroundColor="#00bfff";
}
if (event.keyCode == "79"){
document.getElementById("txtInput").value+="o";
btnO.style.backgroundColor="#00bfff";
}
if (event.keyCode == "80"){
document.getElementById("txtInput").value+="p";
btnP.style.backgroundColor="#00bfff";
}
if (event.keyCode == "81"){
document.getElementById("txtInput").value+="q";
btnQ.style.backgroundColor="#00bfff";
}
if (event.keyCode == "82"){
document.getElementById("txtInput").value+="r";
btnR.style.backgroundColor="#00bfff";
}
if (event.keyCode == "83"){
document.getElementById("txtInput").value+="s";
btnS.style.backgroundColor="#00bfff";
}
if (event.keyCode == "84"){
document.getElementById("txtInput").value+="t";
btnT.style.backgroundColor="#00bfff";
}
if (event.keyCode == "85"){
document.getElementById("txtInput").value+="u";
btnU.style.backgroundColor="#00bfff";
}
if (event.keyCode == "86"){
document.getElementById("txtInput").value+="v";
btnV.style.backgroundColor="#00bfff";
}
if (event.keyCode == "87"){
document.getElementById("txtInput").value+="w";
btnW.style.backgroundColor="#00bfff";
}
if (event.keyCode == "88"){
document.getElementById("txtInput").value+="x";
btnX.style.backgroundColor="#00bfff";
}
if (event.keyCode == "89"){
document.getElementById("txtInput").value+="y";
btnY.style.backgroundColor="#00bfff";
}
if (event.keyCode == "90"){
document.getElementById("txtInput").value+="z";
btnZ.style.backgroundColor="#00bfff";
}
thats the code i used so when i press a-z in the keyboard it will have a-z in the textarea. But even if the capslock is ON its still on lowercase.

How can you create a event listener that listens to a combo of keypresses (ctrl and left/right arrow)?

I have the following code which navigates between elements using the left and right arrow keys.
$(document).keydown(function (event) {
if (event.keyCode === 37) {
console.log("left")
currentPosition > 0 ? currentPosition-- : maxFocusablePosition;
}
if (event.keyCode === 39) {
console.log("right")
currentPosition < maxFocusablePosition ? currentPosition++ : 0;
}
I tried implementing the following, but it doesnt work:
if ( event.ctrlKey && ( event.which === 37 ) ) {
console.log( "Combo Move" );
}

Really? I am surprised because ctrlKey and which work for me!
The keyboard event API is a disgrace. The W3C has been dragging their feet for a long time regarding the standardization of keyboard events. This is why you may see a lot of conflicting information.
$(function() {
var input = $('input');
input.on('keydown', function(event) {
if (event.which === 37 && event.ctrlKey) {
input.val('ctrl-left');
} else if (event.which === 39 && event.ctrlKey) {
input.val('ctrl-right');
} else {
input.val('');
}
});
input.focus();
});
input { width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="Press Ctrl-left or Ctrl-right in here">

Use keyCode as below and use in the function.
$(document).keydown(function (event) {
var keyCode = event.keyCode || event.which;
if (keyCode === 37) {
console.log("left")
currentPosition > 0 ? currentPosition-- : maxFocusablePosition;
}
if (keyCode === 39) {
console.log("right")
currentPosition < maxFocusablePosition ? currentPosition++ : 0;
}
if ( event.ctrlKey && ( keyCode === 37 ) ) {
console.log( "Combo Move" );
}

Disable Ctrl key in IE 8

I want to disable the ctrl key in the IE browser.I had tried some solution using javascript but nothing is working can someone please help me to find out the solution
document.onkeydown = function () {
if (event.keyCode == 17) alert('Ctrl Key is disabled');
};
document.onkeydown = function(e) {
if (e.altKey && (e.keyCode === 36)) {//Alt+home blocked.
return false;
}
if (e.altKey && (e.keyCode === 70)) {//Alt+f blocked.
return false;
}
};
function hookKeyboardEvents(e) {
// get key code
var key_code = (window.event) ? event.keyCode : e.which;
// case :if it is IE event
if (window.event)
{
if (!event.shiftKey && !event.ctrlKey) {
window.event.returnValue = null;
event.keyCode = 0;
}
}
// case: if it is firefox event
else
e.preventDefault();
}
window.document.onkeydown = hookKeyboardEvents;

function Disable_Control_C() {
var keystroke = String.fromCharCode(event.keyCode).toLowerCase();
if (event.ctrlKey && (keystroke == 'c' || keystroke == 'v' || keystroke == 'p' || keystroke == 's' || keystroke == 'u')) {
alert("this function is disabled");
event.returnValue = false; // disable Ctrl+C
}
}
<body onkeydown="javascript:Disable_Control_C()">
this is what i do it to run in the IE...

Working with multiple key press events (windows key)

While working with the multiple keypress events i found this code which worke fine
$(document).bind('keypress', function(event) {
if( event.which === 65 && event.shiftKey ) {
alert('you pressed SHIFT+A');
}
});
But to make it to work wth combinig with windows key... like
event.which === 65 && event.windowsKey
it failed...
Is there any option to make it work with windows key?
if it is a mac machine there is no key as windows..so what could be the alternate option for windows key in mac

Use keyup event.
On a Mac left Command is which = 91, right Command is which = 93. I can't tell what are those on Windows, but you can test it yourself. As #ian commented they should be 91 and 92 respectively.
To test
$(document).on('keyup', function(e) {
var modKey = "";
if (e.shiftKey) modKey += "shiftKey,";
if (e.ctrlKey) modKey += "ctrlKey,";
if (e.altKey) modKey += "altKey,";
if (e.metaKey) modKey += "metaKey,";
console.log ("which: " + e.which + " modkey: " + modKey );
});
UPDATE: Try use keydown event and event.metaKey
$(document).on('keydown', function(e) {
if(e.which === 65 && event.metaKey ) {
console.log ("You pressed Windows + A");
}
});

Remember the key you pressed before. Like if you press shift. get a boolean or something to shiftPressed = true on a onKeyRelease make it false again. That way you can check if shiftPressed == true && aPressed == true before doing something
I made something a while ago for a little WASD game. Perhaps it makes more sense if you see the code:
var up = false;
var down = false;
var left = false;
var right = false;
function keyUp(e) {
keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 37 || keyCode == 65) {
left = false;
}
if (keyCode == 38 || keyCode == 87) {
up = false;
}
if (keyCode == 39 || keyCode == 68) {
right = false;
}
if (keyCode == 40 || keyCode == 83) {
down = false;
}
}
function forceStopMoving() {
left = false;
up = false;
right = false;
down = false;
}
function keyDown(e) {
keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 37 || keyCode == 65) {
left = true;
}
if (keyCode == 38 || keyCode == 87) {
up = true;
}
if (keyCode == 39 || keyCode == 68) {
right = true;
}
if (keyCode == 40 || keyCode == 83) {
down = true;
}
}