As mentioned in WA-ARIA 1.0 keyboard interaction, I need to implement the following behaviour:
When a submenu is open and focus is on a menu item in that submenu:
Escape or the Left Arrow key closes the submenu and returns focus to the parent menu item.
To achieve this, I added the following rudimentary javascript code to my page:
if (e.keyCode == 27) {
element = document.getElementById("spanID");
menuElement = document.getElementById("bigMenu");
if (element.className == "glyphicon glyphicon-menu-down") {
element.className = "glyphicon glyphicon-menu-right";
jQuery("#collapseMenu").hide();
menuElement.setAttribute('aria-expanded', false);
sessionStorage.setItem("expand", false);
}
}
That did not work, so it's not the correct way to go about things. Could someone point what is it that I am doing incorrectly.
if you're already using jQuery go all the way.
$(document).on('keypress', function(e){
if (e.keyCode == 27 || e.keyCode == 37) { // escape or left key
var element = $("#spanID"),
menuElement = $("#bigMenu");
if (element.hasClass('glyphicon') && element.hasClass('glyphicon-menu-down')) {
element.removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
$("#collapseMenu").hide();
menuElement.attr('aria-expanded', 'false');
sessionStorage.setItem("expand", false);
}
}
});
Try this
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
alert("Escape");
// Here is your code for hiding menu.
}
};
Related
document.onkeydown = function(event) {
event = event || window.event;
var isEscape = false;
if ("key" in event) {
isEscape = (event.key == "Escape" || event.key == "Esc");
} else {
isEscape = (event.keyCode == 27);
}
if (isEscape) {
event.preventDefault();
console.log(123213123);
}
};
This code is look on state of button, but it is native JS and how I could make this functionality works? Because I still don't have a solve. What should I wrote in last "if" state to prevent hiding of sidebar?
Thank you all for help!
I am using the JQuery UI Dialog to create a pop-up. The pop-up has two buttons. The first button is automaticly selected by JQuery. I can change the selection between the buttons and the exit button with 'tab'.
I want to change the selection (only between the two buttons) also with the left and right arrow keys on the keyboard.
Where do I have to catch the arrow key down events and how can I change the focus of the buttons?
Thanks for your help!
I would do it something like that :)
$('body').on('keydown', '#terug', function(e) {
if (e.keyCode === 39) { //right arrow
$('#ok').focus();
}
});
$('body').on('keydown', '#ok', function(e) {
if (e.keyCode === 37) { //left arrow
$('#terug').focus();
}
});
Try it :) And if this won't work then go global without specifying selector in event definition:
$('body').on('keydown', function(e) {
if (e.keyCode === 39 && $('#terug').is(':focus')) { //right arrow
$('#ok').focus();
}
});
Hope this will help! :) If not give me a comment and i will try to fix this. :)
Thanks for your help! It worked. I added my solution to complete this question.
I bind the keydown event only on the ui-buttons:
$(document).on('keydown', '.ui-button', handleUIButtonKeyDown);
After that I handle the left and right arrow keys
function handleUIButtonKeyDown(event) {
if (event.keyCode == 37) {
//left arrow key pressed, select the previous button
makeButtonFocus($(this).prev(".ui-button"));
} else if (event.keyCode == 39) {
//right arrow key pressed, select the next button
makeButtonFocus($(this).next(".ui-button"));
}
}
function makeButtonFocus($button) {
$button.addClass("ui-state-focus");
$button.focus();
}
Here's a more generic answer
works on any number of buttons irregardless of DOM structure (btns need not be siblings)
$('body').on('keydown', function(e) {
if (e.keyCode === 37) { //left arrow
modalKeyboardNav("prev")
} else if (e.keyCode === 39) { //right arrow
modalKeyboardNav("next");
}
});
function modalKeyboardNav(dir) {
if (!$("body").hasClass("modal-open")) {
// no modal open
return;
}
var $curModal = $(".modal.show"),
$curFocus = $(document.activeElement),
$focusable = $curModal.find(".btn"),
curFocusIdx = $focusable.index($curFocus);
if (curFocusIdx < 0) {
// nothing currently focused
// "next" will focus first $focusable, "prev" will focus last $focusable
curFocusIdx = dir == "next" ? -1 : 0;
}
if (dir == "prev") {
// eq() accepts negative index
$focusable.eq(curFocusIdx - 1).focus();
} else {
if (curFocusIdx == $focusable.length - 1) {
// last btn is focused, wrap back to first
$focusable.eq(0).focus();
} else {
$focusable.eq(curFocusIdx + 1).focus();
}
}
}
I have a simple script that uses left and right arrows to move to next and previous blogpost.
var nextEl = document.getElementById("pagination__next__link");
var prevEl = document.getElementById("pagination__prev__link");
document.onkeyup = function(e) {
if (nextEl !== null) {
if (e.keyCode === 37) {
window.location.href = nextEl.getAttribute('href');
}
}
if (prevEl !== null) {
if (e.keyCode === 39) {
window.location.href = prevEl.getAttribute('href');
}
}
return false;
};
But it also works when I have text input or textarea focused. What would be the best way to disable the keyboard shortcuts when focused?
Thanks!
Disable event propagation of the input to the document
nextEl.onkeyup = prevEl.onkeyup = function(e){ e.stopPropagation(); };
As you may know some browsers have this default functionality to scroll page down when spacebar is clicked. I usually like this feature, but due to nature of my website I need to get rid of it.
I've been using
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
which eats all spacebar functionality and gets the job done, however if user is typing in a comment or a search query and they press spacebar no space is added in a text as this functionality has been eaten up.
So is there a way to disable just the scrolling part and leave all other functionality as it is?
window.onkeydown = function(e) {
return !(e.keyCode == 32 && (e.target.type != 'text' && e.target.type != 'textarea'));
};
Maybe try this:
window.onkeydown = function(e) {
if(e.keyCode == 32 && e.target.nodeName.toUpperCase() === "BODY") e.preventDefault();
};
Probably need to equalise for IE:
window.onkeydown = function(e) {
var evt = e || window.event;
var elem = evt.target || evt.srcElement;
if(e.keyCode == 32 && elem.nodeName.toUpperCase() === "BODY") {
evt.preventDefault();
return false;
}
};
(untested)
But you would need to attach an event to/within each iframe, using iframeref.contentWindow.
After the page and iframes have loaded you could loop through the frames[] collection.
Simply I have a js script that change the page with left and right arrows, but how to stop that if a specific textarea is selected ?
This is my js to change the page
$(document).keydown(function(event) {
if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
$('textarea').on('keypress', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
See example fiddle: http://jsfiddle.net/GUDqV/1
Update: after OP clarification this works even on jQuery 1.2.6 on Chrome: http://jsfiddle.net/GUDqV/2/
$('textarea').bind('keyup', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
see screenshot of this code on Chrome and jQ1.2.6
Probably the simplest approach is to factor event.target into your code, checking to see if it is the textarea:
$(document).keydown(function(event) {
if (event.target.id == "myTextArea") {
return true;
}
else if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
Any key events that originate from a textarea element with an id of myTextArea will then be ignored.
You can check if the textarea is in focus by doing something like:
if (document.activeElement == myTextArea) {
// Don't change the page
}
$("#mytextarea").is(":focus") This will let you know if the element is focused.
Also $(document.activeElement) will get the currently focused element.
You can check to see if your text area is focused, and disable the script that navigates when using left and right arrow keys.
A little bit of code showing what you've tried might bring in more specific responses.
Hope this helps.