keyCode for tab is not working - javascript

I am using the event keypress in backbone. The keyCode for Enter(13) works fine but the keyCode for tab(9) is not working for some odd reason. Please help me figure this out. Thanks.
onEnterSetTitle: function(ev) {
if (ev.keyCode === 9) {
this.$el.find('.set-title-input input').trigger('blur');
}
},

I fixed it by replace keypress with keydown.

if i have to do this then i would use || operator this way:
onEnterSetTitle: function(ev) {
var kc = ev.which || ev.keyCode;
if (kc === 9) {
.........
}
}

Related

jQuery Keypress Arrow Keys steering in DropDown

I have a problem with Dropdown, which is connected to the database and I can't control arrows up and down to move result only mouse click.
See this is my code that I started writing but doesn't work.
What am I doing wrong?
$(field-customer-dropdown).on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 38 || keyCode == 40) {
showDropDown();
}
});
Edit:
As I made my little code currently looks like this:
$("body").on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 40) {
console.log("key");
$(".drop-down-row:firstchild").css("backgroundcolor","red");
}
});
And this is the result:
enter image description here
How should look like the code so that I could push keydown 40 switch from Data 1 on Data 2?
Can anyone help me?
JavaScript variables cannot contain - in them. Also, the selector you are using is not a HTML Tag, which doesn't have any prefix. If it's a class, prefix it with . else if it is an id, prefix it with a #.
$(".field-customer-dropdown").on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 38 || keyCode == 40) {
showDropDown();
}
});

Overriding shortcut keys in Firefox and Chrome

I have a script that is supposed to open a section of a web page, and save changes on Ctrl + n and Ctrl + s respectively. I got it working in IE, but it doesn't seem to work in Firefox and Chrome. Any ideas?
My override function.
function prevent(e)
{
try{e.stopPropagation();}catch(ex){}
try{e.preventDefault()}catch(ex){}
try{if (e.preventDefault)
e.preventDefault();
else {
e.cancelBubble = true;
e.returnValue = false;
e.keyCode = 0;
}} catch(ex){}
}
I have seen the same issue. Some browsers will not allow you to capture certain shortcuts. Look at this https://stackoverflow.com/a/7296303/1366887
Some key combinations are resticted in Chrome 4, but not in Chrome 3. Look here: https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/Ntc1byZXHfU
Here is the Javascript:
$(window).keydown(function(event) {
if(event.ctrlKey && event.keyCode == 84) {
console.log("Hey! Ctrl+T event captured!");
event.preventDefault();
}
if(event.ctrlKey && event.keyCode == 83) {
console.log("Hey! Ctrl+S event captured!");
event.preventDefault();
}
});
I have used this numerous times, and it has worked greatly.
Here is another rescource you can take a look at: http://unixpapa.com/js/key.html
Without Jquery:
onkeydown = function(e){
if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
e.preventDefault();
//your saving code
}
}
Here is a JSFIDDLE of it working.
For anyone looking for this in the future, the answer for current browsers is the following:
if (event.ctrlKey && event.key === 'k') event.preventDefault()

onkeypress event not firing in ie

$(".tbSearchBox").keyup(function (event) {
if (event.keyCode == 13) {
alert("ye");
searchSet = $(this).val();
$(".btnSerachButton").click();
}
});
Im using the above code to detect whether the user has typed something in a search box then hit enter instead of pressing the search button. this works for all browsers apart from IE. IE can read the on keyup event but bypasses the if statement used. Any idea why?
There some incompatibility in ie regarding event and keycode so to make it browser compatible try this
$(".tbSearchBox").keypress(function (event) {
var ev = event || window.event;
var key = ev.keyCode || ev.which || ev.charCode;
if (key == 13) {
ev.preventDefault();
alert("ye");
searchSet = $(this).val();
$(".btnSerachButton").click();
}
});
var code = (event.keyCode ? event.keyCode : event.which);
or maybe even
var code = event.keyCode || event.which;
You should use event.which here to normalise event.keyCode and event.charCode:
if (event.which == 13) ...

bind function when command s is pressed (OSX)

I found a couple of keypress scripts but I need a key binding in Chrome and Safari for command key and s (like saving files in desktop applications). Does anybody know about such a script or plugin?
jquery is in place but pure JavaScript solutions are also welcome!
thanks
Well... I wanted something like this soo I wrote my own..
function setAppleSSave(form) {
var lastKey;
$(window).bind('keydown',function(e){
if( lastKey && (lastKey == 91 && e.keyCode == 83) || (lastKey == 83 && e.keyCode == 91) ){
e.preventDefault();
$(form).submit();
return false;
}
lastKey = e.keyCode;
});
}
this works fine for me any recommendations? I'm not a good JavaScripter :)
<script src="jquery.js" type="text/javascript"></script>
<script>
var last_key = 0;
var code_meta_key = 91;
var code_s = 83;
$(document).keydown(function(event){
if (last_key == 91 && event.keyCode == 83) {
setTimeout("console.log('boom')",50);
return false;
}
last_key = (event.keyCode == 91) ? 91 : 0;
});
</script>
For those who came for a lightweight and straightforward way to get the job done, here it is :
$(window).keydown(function (e){
if (e.metaKey && e.keyCode == 83) {
yourFunction();
e.preventDefault();
return false;
}
});
Using
jQuery(document).bind('keydown', 'Ctrl+1',function (evt){
setTimeout("console.log('ctrl+1')",50);return false;
});
is fine.
To determine what keys will fire which event i recommend strongly this w3.org test page.

How to detect escape key press with pure JS or jQuery?

Possible Duplicate:
Which keycode for escape key with jQuery
How to detect escape key press in IE, Firefox and Chrome?
Below code works in IE and alerts 27, but in Firefox it alerts 0
$('body').keypress(function(e){
alert(e.which);
if(e.which == 27){
// Close my modal window
}
});
Note: keyCode is becoming deprecated, use key instead.
function keyPress (e) {
if(e.key === "Escape") {
// write your logic here.
}
}
Code Snippet:
var msg = document.getElementById('state-msg');
document.body.addEventListener('keypress', function(e) {
if (e.key == "Escape") {
msg.textContent += 'Escape pressed:'
}
});
Press ESC key <span id="state-msg"></span>
keyCode is becoming deprecated
It seems keydown and keyup work, even though keypress may not
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
Which keycode for escape key with jQuery
The keydown event will work fine for Escape and has the benefit of allowing you to use keyCode in all browsers. Also, you need to attach the listener to document rather than the body.
Update May 2016
keyCode is now in the process of being deprecated and most modern browsers offer the key property now, although you'll still need a fallback for decent browser support for now (at time of writing the current releases of Chrome and Safari don't support it).
Update September 2018
evt.key is now supported by all modern browsers.
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
alert("Escape");
}
};
Click me then press the Escape key
Using JavaScript you can do check working jsfiddle
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
};
Using jQuery you can do check working jsfiddle
jQuery(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
});
check for keyCode && which & keyup || keydown
$(document).keydown(function(e){
var code = e.keyCode || e.which;
alert(code);
});
Pure JS
you can attach a listener to keyUp event for the document.
Also, if you want to make sure, any other key is not pressed along with Esc key, you can use values of ctrlKey, altKey, and shifkey.
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
console.log('Escape key was pressed with out any group keys')
}
}
});
pure JS (no JQuery)
document.addEventListener('keydown', function(e) {
if(e.keyCode == 27){
//add your code here
}
});
Below is the code that not only disables the ESC key but also checks the condition where it is pressed and depending on the situation, it will do the action or not.
In this example,
e.preventDefault();
will disable the ESC key-press action.
You may do anything like to hide a div with this:
document.getElementById('myDivId').style.display = 'none';
Where the ESC key pressed is also taken into consideration:
(e.target.nodeName=='BODY')
You may remove this if condition part if you like to apply to this to all. Or you may target INPUT here to only apply this action when the cursor is in input box.
window.addEventListener('keydown', function(e){
if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
e.preventDefault();
return false;
}
}, true);
Best way is to make function for this
FUNCTION:
$.fn.escape = function (callback) {
return this.each(function () {
$(document).on("keydown", this, function (e) {
var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
if (keycode === 27) {
callback.call(this, e);
};
});
});
};
EXAMPLE:
$("#my-div").escape(function () {
alert('Escape!');
})
On Firefox 78 use this ("keypress" doesn't work for Escape key):
function keyPress (e)(){
if (e.key == "Escape"){
//do something here
}
document.addEventListener("keyup", keyPress);
i think the simplest way is vanilla javascript:
document.onkeyup = function(event) {
if (event.keyCode === 27){
//do something here
}
}
Updated: Changed key => keyCode

Categories

Resources