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.
Related
I want to check if the Tab key is pressed and held down and released so that I can perform some other actions with other key combinations.
var shifted = false;
var tabbed = false;
$(document).on('keyup keydown', function(e) {
shifted = e.shiftKey;
tabbed = e.keyCode === 9;
console.log(tabbed);
});
The above code is working fine for the Shift key, but it's not working for the Tab key. When the Tab key is pressed and held the tabbed variable should be true and when released it should be false.
To answer the question (rather than question if the question should be a question):
This MDN page describes how keyboard events work.
one keydown, with repeat = false
multiple keydown, with repeat = true
one keyup
So you can check for when the tab is started to be held down with keydown && !repeat and when it's stopped being held down with keyup
Note you must also cancel the event so that it doesn't do the correct/expected behaviour of tabbing to the next tabbed-indexed input (emphasis on what tab actually should be doing...)
It's also cleaner to keep the events separate, giving:
var tabdown = false;
$(document).on('keydown', function(e) {
if (e.keyCode === 9) {
tabdown = true;
return false;
}
if (tabdown && e.keyCode >= 49 && e.keyCode <= 51)
{
$("#in" + (e.keyCode-48)).focus();
return false;
}
});
$(document).on('keyup', function(e) {
if (e.keyCode === 9) tabdown = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<em>hold tab and 1, 2 or 3 to change inputs</em><br/>
<input type='text' id='in1'>
<input type='text' id='in2'>
<input type='text' id='in3'>
But you'll note that an instruction is needed on the page as it's not a normal method - and also disables the normal method to easily/quickly switch between inputs in order.
This is not a recommended course of action.
But included here for completeness.
Use the following to identify is tabbed
tabbed = (e.keyCode === 9 && e.type === 'keydown')?true:false;
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();
}
});
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";?>';
}
});
});
Is there any way how to submit form when you press some predefined key on your keyboard (for example ; key)? I was thinking about something with onkeypress, but dont know how to set it just for one specific key.
Yes, and you were right with thinking onkeypress, just pass in the event, and check which key is pressed with event.which:
function keyPressed(event) {
if (event.which == 186) //keycode for semi-colon
console.log("Semi-colon pressed!");
}
}
Now just attach this function to a keypress handler.
Edit: Got the keycodes from here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
You'll want to get the keycode and submit the form if it's the right keycode.
To get the keycode from an event, do:
$(document).on("keypress", function(event) {
var keyCode = event.keyCode;
var keyWhich = event.which;
if(keyCode = 'yourkey' || keyWhich = 'yourkey') {
$(form).submit();
}
});
For a full list of keycodes to replace 'yourkey' with, I'd recommend something like this cheat sheet. Just type your key in the input and use whatever value it provides as your function's logic
You can do this in jQuery:
$(document).ready( function() {
$(document).keydown(function(e){
if (e.keyCode == 186) { // ; key
$('#theform').submit();
}
});
});
See fiddle.
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");
}
}
});