I have an mvc 3 web application.
On one of my web pages I have a table which contains for example 8 rows which have textboxes places in them.
What I would like to do is add some keyboard shortcuts, so for if I was to press Ctrl and w, it would move the cursor directly to the textbox underneath it in the table (i.e. the next row down)
Please can someone offer some advise on how to apply keyboard short cuts to a web page?
this will make ctrl+u as shortcut to this keyboard
however, w as shortcut key is not good idea.... because ctrl+w is default shortcut to close window and users would be habited to use it for that functionality
Also, what I would like is to set a universal setting for the web page so that, for example,
if the user has placed the cursor in a textbox in the table and presses the key combination e.g. alt + d, it will always move the cursor down.
However, if I apply accesskey="d" to all the textboxes in the table, it moves the cursor to the next textbox in the row, rather than the next textbox down.
But if I just apply accesskey="d" to the texboxes in the same column, it will move the cursor down, as I want it.
Please any advise and examples would be very much appreciated.
Thank you
Thank you for your reply. I have taken your advise and I have written a javascript method which detects the keypress of the user.
What I would like to do now is navigate to different cells in my table based on whether the user presses the up, down, left or right arrow key on the keyboard.
Each cell has a textbox inside it.
Please can someone advise me on how I can set the focus the the next cell in the table, depending on which key the user has pressed?
Any help would be very much appreciated.
The following code is what I have so far:
function keypress() {
switch (event.keyCode) {
case 37:
alert("left");
break;
case 38:
alert("up");
break;
case 39:
alert("right");
break;
case 40:
alert("down");
break;
}
}
Thank you for your reply.
I have tried to use this plugin, but it doesn't seem to be working.
What I want to do is when the user is in textbox of a table cell, the move it to the next one according to the keypress of the arrow.
So, I have tried to bind the key press to one of the input boxes, but it doesnt seem to fire the alert when I am in this textbox and I have pressed ctrl+down (which is the down arrow key).
I also viewed the source and it does the refernce to the hotkey javascript file in there.
Please can you offer some help on where I am going wrong?
young345
Member
201 Points
720 Posts
How can I apply keyboard shortcuts to my web page?
Dec 06, 2012 08:36 AM|LINK
Hi,
I have an mvc 3 web application.
On one of my web pages I have a table which contains for example 8 rows which have textboxes places in them.
What I would like to do is add some keyboard shortcuts, so for if I was to press Ctrl and w, it would move the cursor directly to the textbox underneath it in the table (i.e. the next row down)
Please can someone offer some advise on how to apply keyboard short cuts to a web page?
Thank you very much
kedarrkulkar...
All-Star
34405 Points
5531 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 06, 2012 08:55 AM|LINK
accesskey attribute to any control would give that control a focus...
like this
<input type="text" name="txtUserName" accesskey="u" />
this will make ctrl+u as shortcut to this keyboard
however, w as shortcut key is not good idea.... because ctrl+w is default shortcut to close window and users would be habited to use it for that functionality
http://msdn.microsoft.com/en-us/library/ms178233(v=vs.80).aspx
hope this helps...
KK
Please mark as Answer if post helps in resolving your issue
My Site
young345
Member
201 Points
720 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 06, 2012 09:13 AM|LINK
Hi,
Thank you very much for your reply. Do you know what I would have to write in the accesskey if I want to use the down arrow on the keyboard?
Thank you very much
young345
Member
201 Points
720 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 06, 2012 09:43 AM|LINK
Hi,
Also, what I would like is to set a universal setting for the web page so that, for example,
if the user has placed the cursor in a textbox in the table and presses the key combination e.g. alt + d, it will always move the cursor down.
However, if I apply accesskey="d" to all the textboxes in the table, it moves the cursor to the next textbox in the row, rather than the next textbox down.
But if I just apply accesskey="d" to the texboxes in the same column, it will move the cursor down, as I want it.
Please any advise and examples would be very much appreciated.
Thank you
kedarrkulkar...
All-Star
34405 Points
5531 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 06, 2012 11:38 AM|LINK
down key has special responsibility on the browser window... like scrolling the whole page etc.
so, you cannot use it as accesskey of control....
in this case, write a javascript function onkeypress of body tag <body onkeypress="SomeFunctionName()" >
and in this javascript event, get keycode (ascii code) of pressed key... match it with desired key code and perform operation...
this will work on whole page (like global) but will require lot of javascript coding and could slow down your site a bit
hope this helps...
KK
Please mark as Answer if post helps in resolving your issue
My Site
young345
Member
201 Points
720 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 06, 2012 02:27 PM|LINK
Hi,
Thank you for your reply. I have taken your advise and I have written a javascript method which detects the keypress of the user.
What I would like to do now is navigate to different cells in my table based on whether the user presses the up, down, left or right arrow key on the keyboard.
Each cell has a textbox inside it.
Please can someone advise me on how I can set the focus the the next cell in the table, depending on which key the user has pressed?
Any help would be very much appreciated.
The following code is what I have so far:
function keypress() { switch (event.keyCode) { case 37: alert("left"); break; case 38: alert("up"); break; case 39: alert("right"); break; case 40: alert("down"); break; } }BrockAllen
All-Star
27522 Points
4901 Posts
MVP
Re: How can I apply keyboard shortcuts to my web page?
Dec 07, 2012 02:26 PM|LINK
There's a jQuery Plugin for this. Also, my colleague of mine wrote an extension to it:
http://blog.michaelckennedy.net/2012/03/15/add-hot-keys-to-web-apps-with-this-jquery-plugin/
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
young345
Member
201 Points
720 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 10, 2012 08:44 AM|LINK
Hi,
Thank you for your reply.
I have tried to use this plugin, but it doesn't seem to be working.
What I want to do is when the user is in textbox of a table cell, the move it to the next one according to the keypress of the arrow.
So, I have tried to bind the key press to one of the input boxes, but it doesnt seem to fire the alert when I am in this textbox and I have pressed ctrl+down (which is the down arrow key).
I also viewed the source and it does the refernce to the hotkey javascript file in there.
Please can you offer some help on where I am going wrong?
Thank you very much
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
....
<script src="/Scripts/jquery.hotkeys.js" type="text/javascript"></script>
....
</head>
function keyNav(data, event, row, cell) {
$('#item[0]_OrderNamw').bind('keydown', 'ctrl+down', function () {
alert("ctl+down");
});
}
young345
Member
201 Points
720 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 10, 2012 09:17 AM|LINK
I found the issue mentioned above, it doesn't seem to like the square brackets for some reason.
However, I have faced a problem in that I can't actualy type any text in to the textbox. Is this because the event is always firing?
I have used the event onkeydown in the textbox which always fires when a button is pressed.
Please can someone offer some advise on why this is?
Thank you very much.
gtscdsi
Member
250 Points
50 Posts
Re: How can I apply keyboard shortcuts to my web page?
Dec 14, 2012 02:46 AM|LINK
Try "onkeypress"
How can I apply keyboard shortcuts to my web page?
http://forums.asp.net/t/1033798.aspx/1
http://blogs.msdn.com/b/asiatech/