Develop Reference

Javascript - Disable Key Down selectively

My application has a image palette. I am using key board shortcuts to move next and previous images. The following is the code:
window.addEventListener('keydown', function(e) {
if (e.which == 37 || e.which == 65) {
beforeAfterImages(1);
gtfval();
}
if(e.which == 39 || e.which == 68) {
beforeAfterImages(2);
gtfval();
}
})
In the same page, I have a button, that opens a modal window. The modal window has fields for text input. During text input When I press a or d the image palette behind the modal keeps moving. Can I disable the keydown functions, when I open the modal window. I tried the following:
$('#myModal').click(function() {
window.addEventListener('keydown', function(e) {
if (e.which == 37 || e.which == 65) {
return false;
}
if(e.which == 39 || e.which == 68) {
return false;
}
})
});

When you open the modal, you can edit a variable, like var isModalOpen. Then check that everytime the user presses the keys:
window.addEventListener('keydown', function(e) {
if(modalIsOpen) return; // this
if (e.which == 37 || e.which == 65) {
beforeAfterImages(1);
gtfval();
}
if(e.which == 39 || e.which == 68) {
beforeAfterImages(2);
gtfval();
}
})

Detect delete action on "input" event in Firefox

Is there any way to detect delete action on "input" event?
Something like inputType == "deleteContentBackward" in Chrome

You can use the JavaScript Keycodes:
e.keyCode === 8 for key Backspace
e.keyCode === 46 for key Delete
document.querySelector('#input').onkeyup = function(e) {
if(e.keyCode === 8 || e.keyCode === 46) {
console.log('Deleted with key ' + e.key);
}
};
<input type="text" name="input" id="input">

document.getElementById("my_id_name").oninput = function(e) {
if ((e.inputType == 'deleteContentBackward') || (e.inputType == 'deleteContentForward') || (e.inputType == 'deleteByCut')){
$('my_id_name').value = null
})
}

prevent user from entring 0 as a input

I am trying to prevent user from entering 0 in the input box.
HTML code :
<input class="billMenuQuantity" type="number" name="quantity">
Jquery code:
$('.billMenuQuantity').on('keyup keydown', function (e) {
if ($(this).val() < 1 && e.keyCode != 46 && e.keyCode != 8) {
e.preventDefault();
$(this).val(1);
}
});
It's preventing the user from entering the 0 but it's also preventing the user from entering the any other single digit number(i.e 2-9) other than 1.It is accepting the double digit number(i.e 11, 12 etc).
Can any one help me with this?

Just test code === 96 and length of the input-value
$('.billMenuQuantity').on('keyup keydown', function(e) {
var code = e.keyCode || e.which;
if (this.value.length === 0 && code === 96) {
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input class="billMenuQuantity" type="number" name="quantity">

Try this one
$(this).val() == 0 instead of $(this).val() < 1
$('.billMenuQuantity').on('keyup keydown', function (e) {
if ($(this).val() == 0 && e.keyCode != 46 && e.keyCode != 8) {
e.preventDefault();
$(this).val(1);
}
});

How the DEL Key with Mozilla Firefox

I need the help for my problem in my asp.net MVC3 application I have a textbox which is validating for currency format ($228.00) but in this text box it doesn't work for the DEL key because . and delete key have same ASCII key which 46. I also set a validation in this textbox for . is only one time will be accept in the text box so if "." entered one time then delete will not work.
Here is my validate Javascript:
function validateForCharacter(val, id, e) {
window.event.keyCode : -1;
var key = e.keyCode || e.charCode || e.which;
var currentChar = String.fromCharCode(key);
if (val.indexOf(currentChar) != -1 && currentChar == ".")
{
return false;
}
if (key >= 48 && key <= 57 || key == 46 || e.keyCode === 8 || e.keyCode === 9 || e.keyCode === 37 || e.keyCode === 35 || e.keyCode === 39)
{
$(this).val("");
return true;
}
return false;
}
This is my View (Html) code for textbox:
<input type="text" id="t1" onkeypress="return validateForCharacter(value, id, event)/>

Jquery does it right... but in case you need specifically detect delete key on Firefox or IE9 you can use event.key property.
I.E:
if (event.key == "Delete")
Live Demo:
$(document).ready(function() {
$("#nondeletable").on("keydown", function(event) {
$("#result").html(event.type + ": " + event.which);
if (event.key == "Delete")
$("#result").append(" <b>Delete!</b>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="nondeletable" />
<div id="result"></div>

javascript : key validation

im using javascript to validate keys in textbox. it is not working :(
function numeric(e) {
return ((e.keyCode == 8) ||
(e.keyCode == 9) ||
(e.keyCode > 47 && e.keyCode < 58) ||
(e.keyCode > 36 && e.keyCode < 41) ||
(e.keyCode == 46) ||
(e.keyCode > 95 && e.keyCode < 106) ||
e.keyCode == 190 ||
e.keyCode == 110);
}
help me...

function numeric(e) {
e = e || window.event;
keycode = e.keyCode || e.which;
if(keycode === 13){
alert("cheese");
}
}

I know that in I.E. you can set event.keyCode=0 to suppress the key appearing in the control. But I think you need to trap the onkeydown. Firefox might have an equivalent. This is good because it prevents the key actually "arriving" at the control.
Also keep in mind that you might need to handle combinations of Shift + key and alt + key.
a good debug technique for this sort of thing is to say windows.status = event.keyCode,
and you can see what the keycode is as you type it...

Just try out the following code. I have checked F5 keycode, you can check as you want
function disableKey(event)
{
if (!event) event = window.event;
if (!event) return;
var keyCode = event.keyCode ? event.keyCode : event.charCode;
if (keyCode == 116) {
showMsg("This functionality is disabled.");
window.status = "F5 key detected! Attempting to disabling default response.";
window.setTimeout("window.status='';", 2000);
// Standard DOM (Mozilla):
if (event.preventDefault) event.preventDefault();
//IE (exclude Opera with !event.preventDefault):
if (document.all && event && !event.preventDefault) {
event.cancelBubble = true;
event.returnValue = false;
event.keyCode = 0;
}
return false;
}
}
function setEventListenerForFrame(eventListener)
{
document.getElementById('your_textbox').onkeydown = eventListener;
//frames['frame'].document.onkeypress = eventListener;
}
<body onload="setEventListener(disableKey);">

Try this if you want a numbers only textbox:
function numbercheck(event) {
var unicode = event.charCode; var unicode1 = event.keyCode; if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Safari") != -1) {
if (unicode1 != 8) {
if ((unicode >= 48 && unicode <= 57) || unicode1 == 37 || unicode1 == 39 || unicode1 == 35 || unicode1 == 36 || unicode1 == 9 || unicode1 == 46)
{ return true; }
else
{ return false; }
}
}
if (navigator.userAgent.indexOf("MSIE") != -1 || navigator.userAgent.indexOf("Opera") == -1) {
if (unicode1 != 8) {
if (unicode1 >= 48 && unicode1 <= 57)
{ return true; }
else
{ return false; }
}
}
}
And in your textbox call it on the onkeypress event:
onkeypress="return numbercheck(event)"