Reputation: 9185
Implementing shortcut keys in a webpage
I was thinking of implementing shortcut keys in a pet web application, I am developing for me. I am using c# and asp.net.
I have seen very few web-sites( frankly I remember only g-mail), which have shortcut keys.
Has anyone ever implemented shortcut keys for a web application, if yes how to go about it?
Thanks.
Upvotes: 11
Views: 13416
Answers (7)
Reputation: 25824
Accesskeys are useless, but visit this site if you insist on using them. Much better to use this than javascript, though the ways of accessing access keys varies across browsers. The advantage of this over ugly Javascript solutions is that it leaves it up to the browser and the user's browser settings to handle them.
Upvotes: 6
Reputation: 1
<script type="text/javascript">
if (window.captureEvents) {
window.captureEvents(Event.KeyUp);
window.onkeyup = executeCode;
}
else if (window.attachEvent) {
document.attachEvent('onkeyup', executeCode);
}
function executeCode(evt) {
if (evt == null) {
evt = window.event;
}
var theKey = parseInt(evt.keyCode, 10);
switch (theKey) {
case 35: // End
document.getElementById("<%=btnSave.ClientID%>").click();
//document.getElementById('ctl00_ContentPlaceHolder1_btnHome').click();
break;
case 36: // F8
document.getElementById('btnreset').click();
break;
case 120: // F9
// document.getElementById('Button1').click();
break;
case 87: //w
if (window.event.altKey)
document.getElementById('buttonid').click();
break;
}
evt.returnValue = false;
return false;
}
</script>
<asp:Button ID="btnSave" runat="server" Text="Button" />
</asp:Content>
Upvotes: 0
Reputation: 64
use this javascript on your master page this work using keycode.........
------------------------------------------
var isfocused=false;
document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
var keyIsDown = {};
var get_focused="";
function overrideKeyboardEvent(e){
switch(e.type){
case "keydown":
if(!keyIsDown[e.keyCode]){
keyIsDown[e.keyCode] = true;
// do key down stuff here
if (e.keyCode == 40) {
var t = new Array;
t = document.getElementsByTagName("input");
var n = "1";
for (var r = 0; r < t.length; r++) {
if (t[r].type == "checkbox") {
var i = document.cookie.split(";");
var s = y = i[0].substr(i[0].indexOf("=") + 1);
if (s.toLowerCase().indexOf("active") != -1) {
if (n == "2") {
document.getElementById(t[r].id).focus();
document.cookie = "aa" + "=" + t[r].id;
return false
}
if (t[r].id == s) {
n = "2"
}
} else {
document.getElementById(t[r].id).focus();
document.cookie = "aa" + "=" + t[r].id;
return false
}
}
}
}
if( e.keyCode==115)
{ e.preventDefault();
var c = new Array();
c = document.getElementsByTagName('input');
for (var i=0;i<c.length;i++)
{
if(c[i].type=='submit' && c[i].value=='Submit' || c[i].type=='submit' && c[i].value=='Summary Report' )
{
e.preventDefault();
document.getElementById(''+c[i].id+'').click();
}
}
return ;
}
if( e.keyCode==27 )
{
window.location = document.referrer;
}
if( e.keyCode==46 )
{
var c=new Array();
c=document.getElementsByTagName('tr');
for(var i=0;i<c.length;i++)
{
if(c[i].onclick!=null)
{
if(c[i].onclick.toString().indexOf('OnUserSelected')!=-1 && c[i].onclick.toString().indexOf(''+get_focused+'')!=-1)
{
var children =new Array();
if(c[i].innerHTML.indexOf('remove')!=-1)
{
children = c[i].innerHTML.split('remove');
var gg=children[1];
var get1=new Array();
get1=gg.split('id="');
// document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value='1111';
var a= document.getElementById(''+get1[1]+'remove').click();
return false;
//__doPostBack(''+get1[1]+'remove','');
}
else
{
children = c[i].innerHTML.split('delete');
var gg=children[1];
var get1=new Array();
get1=gg.split('id="');
// document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value='1111';
var a= document.getElementById(''+get1[1]+'d`enter code here`elete').click();
return false;
}
}
}
}
}
if( e.keyCode==112 )
{
e.preventDefault();
var c=new Array();
c=document.getElementsByTagName('a');
for(i=0;i<c.length;i++)
{
if(c[i].innerText.indexOf('Add New')!=-1 || c[i].innerText.indexOf('Back to')!=-1)
{
window.location=''+c[i].href+'';
}
}
}
if( e.keyCode==113)
{
if(get_focused!="")
{
var c=new Array();
c=document.getElementsByTagName('input');
for(var i=0;i<c.length;i++)
{
if(c[i].type=='hidden')
{
if(c[i].id.indexOf('hidden111')!=-1)
{
document.getElementById(''+c[i].id+'').value='00';
document.getElementById(''+c[i].id+'').value=get_focused;
__doPostBack(c[i].id,"");
}
}
}
}
}
if (e.keyCode == 38) {
var t = new Array;
t = document.getElementsByTagName("input");
var n = "1";
for (var r = 0; r < t.length; r++) {
if (t[r].type == "checkbox") {
var i = document.cookie.split(";");
var s = y = i[0].substr(i[0].indexOf("=") + 1);
if (s.toLowerCase().indexOf("active") != -1) {
if (t[r].id == s) {
n = "2"
}
if (n == "2") {
var f = 0;
while (f == 0) {
if (t[r - 1].type == "checkbox") {
f = 1
} else {
r--
}
}
document.getElementById(t[r - 1].id).focus();
document.cookie = "aa" + "=" + t[r - 1].id;
return false
}
}
}
}
}
}
break;
case "keyup":
delete(keyIsDown[e.keyCode]);
// do key up stuff here
break;
}
//e.preventDefault();
return true;
}
function disabledEventPropagation(e) {
if (e) {
if (e.stopPropagation) {
e.stopPropagation()
} else if (window.event) {
window.event.cancelBubble = true
}
}
}
document.body.setAttribute("onunload","getdeleted()");
function getdeleted()
{
document.cookie="aa" + "=" +"";
}
0
function OnUserSelected(source,eventArgs) {
if(document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value!='1111')
{
var hdnValueID = 'ctl00_ContentPlaceHolder2_hidden111';
try
{
document.getElementById(hdnValueID).value =source;
document.getElementById(hdnValueID).value = eventArgs;
__doPostBack(hdnValueID, "");
}
catch(errorr)
{
alert(errorr);
}
}
else
{
get_focused =eventArgs;
document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value='';
}
}
Upvotes: -3
Reputation: 58342
Mousetrap is an excellent JavaScript library for handling shortcut keys.
Based on how I've seen other apps (Gmail, JIRA) use shortcut keys, and based on my own experience, I would make a couple of suggestions:
- Interfering with browser shortcut keys is a real possibility. The most reliable way to avoid this is to use unmodified letters (i.e., A instead of Ctrl-A or Alt-A).
- Keyboard shortcuts are relatively rare for web sites, so they suffer from poor discoverability. Since they're not very discoverable, you'll need to add, e.g., tooltips or unobstrusive hints letting users know that they exist. Keyboard shortcuts seem to be most useful for web applications, like Gmail and JIRA, that are expected to be used heavily; otherwise, there's just not enough opportunity or benefit to learning them.
Upvotes: 6
Reputation: 4322
In order to implement this you need to register your required keyboard key combinations with JavaScript. It's like registering action listeners in C# for certain events. First URL I found on Google here seemed to have a good overview: Handling Keyboard Shortcuts in JavaScript.
Once keyboard events are registered you can then use the JavaScript to invoke AJAXy (technically JSON calls I think) operations on your ASP.net backend.
Upvotes: 3
Reputation: 42227
If you enable this feature, make sure you can switch it on and off - be aware that your shortcuts may interfere or conflict with the built-in shortcuts that many of the assistive software packages out there (i.e. Jaws), and can be counterproductive in terms of accessibility.
Upvotes: 4
Reputation: 5745
Handling Keyboard Shortcuts in JavaScript
But I understand why few sites use it - this way has many difficulties. And encourage you to not use it too. Or not to make it as main feature.
Upvotes: 3
Related Questions
- custom keyboard shortcuts using javascript for web app
- What should I do to add the shortcut keys in Web Application and Web Sites?
- Best approach to add keyboard "Shortcuts/Hotkeys" to control my application
- Keyboard shortcuts
- Setting a hotkey in my asp.net application
- Use shortcut key as Access key in a web page
- Keyboard shortcuts in WebForms
- Hotkeys in webapps
- Can I use keyboard short cuts to use my website
- How to add keyboard shortcuts in ASP.NET for Focus / ButtonClicks