How to assign keyboard keys as shortcut for menu items - javascript

I have menu items like purchase order, delivery menu etc. I want to assign f3 as shortcut for delivery memo and also for other menu items also. So How do I do that?? Following is my code, it may be wrong . Because I dont know the logic behind this kind of functionality.
$(document).ready(function(e){
$(document).keydown(function(e){
var keycode = e.keyCode;
if (keycode == 65) {
alert("asda");
$("#change").trigger('click');
}
});
});

This should work:
$(document).bind('keydown', function(e) {
if (arguments[0].key == 65) {
alert("F3 pressed");
document.location.href = 'new address'; // updated from comments
}
});

This is my working code...And I have put this code in my header file so this code will work on any page of my site.
$(document).ready(function(e){
$(document).keydown(function(e){
var keycode = e.keyCode;
if (keycode == 114) {
document.location.href='<?php echo base_url()."index.php/purchase";?>';
}
});
});

Related

Bind arrow keys to navigation with jQuery

For the purposes of this test I have some basic html:
Previous
Next
I have a fairly straightforward jquery function:
var prev = $('.prev');
var next = $('.next');
$('body').on('keydown',function(e){
if(e.which == 37){
prev.trigger('click');
}else if(e.which == 39){
next.trigger('click');
}
console.log(e.which);
e.preventDefault();
});
The console is logging each key pressed, however this is not binding the click event to each of the href's and I am not sure why.
In addition I think using e.preventDefault(); is stopping other key actions on the page. In the other keyCode functions in my app I am not using return false or preventDefault();
Is it possible to wrap the anchors in a div and bind the keydown only to that container for example:
<div class="nav">
Previous
Next
</div>
$('.nav').on('keydown', function(){} // etc
I have a jsfiddle here: https://jsfiddle.net/lharby/sva0a4d1/
You can try this:
$('body').on('keydown',function(e){
if(e.which == 37){
$('a.prev')[0].click()
}else if(e.which == 39){
$('a.next')[0].click()
}
});

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

tab and Shift+tab key event in KendoGird

I am using KendoUI tool for UI for the application in which i have a grid of 2 Columns and 3 rows i mean 6 cells and all these cells having input type text.I want that when moving from one cell to other i.e textboxes using "tab" key it must throw me any event say as alert("I am in Cell").
Here my Code as Follows that is not working please suggest me on this.
$(function () {
$("input[type=text]").keyup(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
alert("I am in Cell")
grid.closeCell();
}
});
});
For tab key you have to add keydown() function.
<script>
$(document).ready(function(){
$("#KendoGridName").keydown(function(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
alert("I am in Cell")
e.preventDefault();
}
});
});
</script>
e.preventDefault() function prevents the default behaviour of the tab key i.e. to go to next active control and hence user is moved from one cell to another in grid.

How to disable Windows keys (logo key and menu key) using Javascript

I write this Javascript code but it doesn't disable 2 windows keys (I mean logo key and menu key), though:
document.onkeydown = function(e) {
document.title = e.keyCode;
if (e.keyCode == 91 || e.keyCode == 93) {
window.event.keyCode = 0;
window.event.returnValue = false;
return false;
}
};
the 2 window.xxx statements are actually not necessary but I add them in to buy an insurance (Just doubt that e doesn't totally equal to window.event).
So I'd like to ask this question: " Is there a feasible way, directly or indirectly, to do this job in Javascript? "
Your code looks right, try to find out real keycodes with this simple script:
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
alert("keycode: " + keycode);
}
And to disabel certain keys you modify function (example for 'Enter'):
document.onkeydown = checkKeycode
function checkKeycode(e) {
var event = e || window.event;
var keycode = event.which || event.keyCode;
if (keycode == 13) {
// return key was pressed
}
}
JavaScript cannot stop the effect of the Windows logo key, which (when released) is supposed to bring up the Window's start menu. In combination with other keys, it has other system wide effects (like with M = minimise all windows). This is something that happens outside of the browser context, and thus cannot and should not be blocked by the code running in your browser.
The Windows menu key can be somewhat disabled, as described in this answer:
$(function(){
var lastKey=0;
$(window).on("keydown", document, function(event){
lastKey = event.keyCode;
});
$(window).on("contextmenu", document, function(event){
if (lastKey === 93){
lastKey=0;
event.preventDefault();
event.stopPropagation();
return false;
}
});
});

Pagination jQuery next and previous control with keyboard - .trigger('click') doesn't work

I am working on pagination.
To help a user to change pages with keyboard short-keys, instead of clicking a mouse, I came up with a jQuery solution that catches user keyboard events with CTRL + → and CTRL+ ←
$(document).keydown(function(event) {
if (event.ctrlKey) { // if ctrl is being held
var keycode = event.keyCode ? event.keyCode : event.which;
if(keycode === 39) { // for rightwards arrow (for leftwards arrow keycode === 37)
window.open($('#pagination li.next a').attr('href'), '_parent'); // open the next link
}
}
});
My question is why it doesn't work with regular .trigger('click'), like this:
$('#pagination li.next a').trigger('click');
jsFiddle Live Example
$('#next').click(function() {
window.open('http://www.stackoverflow.com', '_blank');
});
$('#prev').click(function() {
window.open('http://www.google.com', '_blank');
});
$(function() {
$('#next').trigger('click')
})
I didn't find the exact answer for my question, I would like to post a slightly different and final, well working solution, based on information gathered and peoples' post. Thank you those that replied!
When you construct pagination, I believe, a user would be happy to just click ← Ctrl / Ctrl → to switch in between pages.
The following code has only one improvement - the error occurred on the first an the last page - when there are no next or previous buttons on the page, because you either on the last pagination or the first one, the initial code returned undefined (obviously), so I fixed it and would like to share the final result with those who could be possibly interested:
$(document).keydown(function (event) {
var keycode = event.keyCode ? event.keyCode : event.which;
if (event.ctrlKey) {
if (keycode === 39) {
var nextExists = $('#pagination li.next a').attr('href');
if (nextExists) window.location.href = $('#pagination li.next a').attr("href");
}
if (keycode === 37) {
var previousExists = $('#pagination li.previous a').attr('href');
if (previousExists) window.location.href = $('#pagination li.previous a').attr("href");
}
}
});

Categories

Resources