Detect delete action on "input" event in Firefox - javascript

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
})
}

Related

Need help restricting a js function(that restricts invalid chars) to a particular input type

Hi i would like to restrict a function that allows only, numbers, back space and left & right arrow keys to inputs with number type, because when i implement it, it also affects my text inputs.
<script>
function chars(evt){
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
}
</script>
Assign an id to your <input>. Add an event listener to it, like :
function getKeyCode() {
var key = window.event ? event.keyCode : event.which;
if(event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
console.log(true);
//return true;
} else if (key < 48 || key > 57) {
console.log(false);
// return false;
} else {
console.log(true);
// return true;
}
}
var el = document.getElementById("myInput");
el.addEventListener("keypress", getKeyCode);
<input type="text" id="myInput">

Detect keycode ALT+L via Javascript

I try to detect if a user presses F12 or ALT + L.
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123 || (event.keyCode == 18 && event.keyCode == 76)) {
//do anything
return false;
}
}
What am I doing wrong?
event.keyCode contains only one value. You can use event.altKey do detect if the alt key is pressed.
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123 || (event.keyCode === 76 && event.altKey)) {
//do something
return false;
}
}
The standard way is to create a bool to detect if the 'alt' key is currently held down and then a separate if to detect if that is true and if the L key as just been pressed - see the fiddle:
http://jsfiddle.net/L4cb9/1
var held = false;
...
else if (event.keyCode == 18) {held = true;}
if (held == true && event.keyCode == 76) {
alert();
}
...
document.onkeyup = function(event) {
if (event.keyCode == 18) {held = false;}
}
This is applicable to holding any combination of keys - you can create an array for multiple key holds greater than two:
held = [];
...
if (event.keyCode == i) {held[i] = true;}
...
and so on

jQuery detect keyboard press then focus to textbox

I have jQuery function that detect if some key in keyboard pressed. So far that worked, example if I press "P" then it will focus to textbox.
$(document).keyup(function(e)
{
if (e.keyCode == 51 || e.keyCode == 52 || e.keyCode == 80 || e.keyCode == 65)
{
$("#code_read_box").focus();
}
});
Now I want when I press "P", "P" will set too to textbox.
<input type="text" id="code_read_box" value=""/>
Any advice ?
DEMO here
Use String.fromCharCode:
String.fromCharCode(e.keyCode)
Demo: http://jsfiddle.net/hw2g5/
Your code:
$(document).keyup(function(e) {
if (e.keyCode == 51 || e.keyCode == 52 || e.keyCode == 80 || e.keyCode == 65) {
$("#code_read_box").focus();
$("#code_read_box").val(String.fromCharCode(e.keyCode));
}
});
If you want to append values, so:
$("#code_read_box").val($("#code_read_box").val() + String.fromCharCode(e.keyCode));
Solved.
$(document).keyup(function(e) {
var key = String.fromCharCode(e.keyCode);
if (key.match(/[34PA]/) && !$('input').is(':focus')) {
$('input').focus();
$('input').val($('input').val() + key);
}
});

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)"

Categories

Resources