I have an application that does something (eg alert) each time a spacebar is pressed. This works fine if I am not using JAWS screen reader. However, once I load JAWS screen reader, it does not execute alert when I press the spacebar. I need to use JAWS so I need this to work. Here is the code snippet.
$(document).keypress(function(event) {
var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
if (chCode == 32){ //32 is keyCode for spacebar
alert("spacebars!!!");
}
});
From my observation, it seems JAWS grabs the keyboard focus and wouldn't allow the spacebar event to fire. JAWS always reads "Space" when I press the spacebar but the alert event does not fire. How can I still get the alert or doSomething() to fire when the spacebar is pressed? How can I take control from JAWS or maybe share keyboard control with JAWS such that even though JAWS reads out the character I pressed (in this case Spacebar), it will allow my event (alert) to fire. Thanks.
More code:
$(document).keypress(function(event) {
var cc= ('charCode' in event) ? event.charCode : event.keyCode;
if (cc == 32)
{
spArray.push(Number(new Date()));
}
});
In general, it is not advisable to over-ride screen readers, even if they let you. There are quite a few JAWs keyboard commands (in conjunction with INS) that use the spacebar, and you'd probably lock those commands out.
If the area is primarily formed controls or interactive widgets then you could wrap it in an element with role="application". That puts a (windows) screen reader into 'forms' mode, where keys are passed through to the web-page.
Do not wrap everything in role="application", just the interactive area.
Update: With more information, this is about an audio-based capture where the user triggers an audio file, then triggers something again to set a time and pass the capture.
Using a native button, Jaws will pass through the use of enter (not sure about space, that isn't the usual 'activate' key). I'd suggest either checking for enter key (charcode 13 I think), or even onclick should work. On a native button/link it works across screen readers.
$(document).click(function() {
spArray.push(Number(new Date()));
});
Assuming that's in the right location so that it doesn't become active until needed. (JS isn't my strong point, but go with the enter key or onclick.
An event handler declared like this works in our application:
doKeyDown_: function (evt) {
var key = evt.keyCode || evt.which;
//arrows
if (key == 27 || (key >= 37 && key <= 40)) {
try {
if (key >= 37 && key <= 40) {
this.handleArrwos(evt);
} else {
this.handleEsc(evt);
}
...
Although it is based on the ZK platform, the inner engine is still JQuery. Please note that the event is keyDown (not keyPress) and how the pressed key is detected. The example is for Esc and arrow keys - Space should be no problem.
As for accessibility, our etire page is declared as role="application", since the entire content is a dynamically generated page, it's really an application. Only this way Jaws doesn't eat up about any possible keys combination.
Related
I'm working on a mobile web app that requires an input field that wraps text. So I
thought I'd use div with contenteditable.
JSFiddle: https://jsfiddle.net/9r5u7fgs/
<div
class="text-field"
contenteditable="true"
/>
The "input" field should only be 1 line, so when the user presses "enter" I
want to trigger a POST request with the field contents. I don't want any
newlines in the field.
I thought about listening for keyup and checking the keyCode. This works
correctly on desktop.
document.addEventListener("keyup", function(e) {
console.log(`e.keyCode=${e.keyCode} - e.key=${e.key}`);
if (e.keyCode === 13) {
sendContents(e.target.textContent);
}
});
However on mobile browsers, I get different behavior.
First, the keyCode is always 229 for letters.
Second, I have to press enter twice to get the expected keyCode.
This is what Android 13 Firefox 108.2.0 shows if I type f <enter> <enter>.
e.keyCode=229 - e.key=Process
e.keyCode=229 - e.key=Process
e.keyCode=13 - e.key=Enter
Android Chrome 108.0.5359.128 prints something similar.
e.keyCode=229 - e.key=Unidentified
e.keyCode=229 - e.key=Unidentified
e.keyCode=13 - e.key=Enter
I found this: Keycode value is return as 229 for all keys
but it didn't really provide a solution.
Is there a way to detect when a user presses "enter" the first time in a div
contenteditable? Is there another event I should listen to?
Reminder this is for mobile web browsers, not desktop.
Found similar threads, but nothing seems to work for me.
I have a simple text input in my Vue app that, needs to be blurred once the user clicks Enter of whateve the "Return" button is on their keyboard. This is all fine and well on Desktop and iOS, however on Android the Enter button changes to Next and will not follow the behavior I set for it.
I've tried a bunch of different keycodes which I've found in different thread answers and so far, none of them match the Next button on Android.
This is what my code looks like:
<v-text-field
label="My Input"
class="input-field"
v-model="myInput"
#keydown="preventUnwantedEnterDefaultBehavior"
/>
...
private preventUnwantedEnterDefaultBehavior = (evt) => {
// none of these work for next
if (evt.keyCode === 13 || evt.keyCode === 261 || evt.keyCode === 229 || evt.key === 'Unidentified') {
evt.target.blur();
}
}
Take note that the Next buttons default behaviour is to skip to the next input. I do not want this to happen. I want simple blur of the current input, regardless of what the Enter button is labelled as.
Alternatively, if this is really a near impossible task, how can I force the Android's Next button to just be your good ol' Enter button of code 13 as it on all the other platforms?
Have you tried using keycode 66? As described in the android documentation:
https://developer.android.com/reference/android/view/KeyEvent#KEYCODE_ENTER
If that doesn't work you could try to handle the #keyup event for the same codes.
I would like to switch between pages using arrows (37 - left arrow, 39 - right arrow). The code below works correctly with Firefox, Chrome and Internet Explorer.
The solution does not work with Microsoft Edge after Back (back in browsing history) button has been clicked in the browser. Does anybody know how to fix it?
<script type="text/javascript">
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(event) {
var x = event.which || event.keyCode;
if (x == 37) { window.location.href = "page1.html";}
if (x == 39) { window.location.href = "page2.html";}
};
</script>
This looks like a bug. In that when you use the navigation controls (or the refresh button) the window seems to lose focus and so keydown events do not fire. Also window.focus doesn't seem to work as expected either.
But I have found a workaround (or two). The first is to modify your script to look like this:
<script>
window.onload = function(){
document.body.focus();
document.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(event) {
var x = event.which || event.keyCode;
if (x == 37) { window.location.href = "page1.html"; }
if (x == 39) { window.location.href = "page2.html"; }
};
}
</script>
You then need to add a tab index to the body tag e.g:
<body tabindex="1">
This then allows you to programmatically set the focus of the page (And it isn't ignored by Microsoft Edge like window.focus() is) The reason you need to add tabindex to the body is because the focus method is implicitly applicable to a limited set of elements, chiefly form and <a href> tags. In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property.
This workaround does add a potential accessibility issue since your element can gain focus via keyboard commands, such as the Tab key. Although I'm not sure how much of a problem that really is.
The second option is to add a form element to your page and either manually set focus to it or add the autofocus attribute:
<input autofocus>
Edge seems to respect this and gives the element auto focus and your key down events will now fire. Sadly You can't just hide this element, since if it's hidden it no longer get auto focus. (maybe you could set it's opacity to 0) but I didn't try.
Of the two options I prefer workaround 1. I will file this as a bug with the Edge team on connect when I get a chance this afternoon.
I try to use javascript listen the shortcut of keyboard, such as "command+shift+4"
My current solution is : [on Mac]
window.addEventListener('keypress', function(e){
if (e.shiftKey && e.metaKey && e.keyCode == 52) {
alert("Here it is.");
}
}, false);
But since the shortcut "command+shift+4" is the default "screenshot" of Mac, so the javascript can not capture it. If I change the 52 to 53, then this code works, but it listens to "command+shift+5".
Is there some solution let javascript listen to the default shortcut of Mac?
Your browser is running underneath your operating system. If you "catch" the keypress event on the OS level and don't let it pass through ( imagine e.stopPropagation() ), you are unable to catch it in your browser. It's the same thing as if you were trying to bind something to Alt+F4 - this event is handled before it gets to the browser's on-page events. Some may pass through and some might not.
If you are able to, change the shortcut to a OS/browser independent one.
Avoid these keyboard shortcuts. Also you might want to read this SO question.
To make sure your shortcut is recognized correctly simply do an output of your keypress
window.onkeyup = function(e){
var pressed = "";
if(e.shiftKey){
pressed += " + Shift";
}else if(e.ctrlKey){
pressed += " + Ctrl";
} //and so on
pressed += e.keyCode;
console.log(pressed);
}
I have currently an eventlistener listening for when a user enters an email address in a textbox on an html website. It then displays an alert when it detects an email address is being entered. Currently I have set it up whereby it detects the event blur then checks whether it meets the regex then an alert will display. This creates many alerts and is not very accurate as the alert
I need the eventlistener to listen for when the tab key specifically is pressed. I know I need to use KeyCodes but have not used them before. This eventlistener is currently working dynamically as it is a Firefox AddOn that scans a webpage so the eventlistener is not specifically attached to a specific input box.
Code:
vrs_getWin.document.getElementsByTagName("body")[0].innerHTML = bodyContents;
var inputFields = vrs_getWin.document.getElementsByTagName("input");
for(inputC=0; inputC < inputFields.length; inputC++) {
var elementT = inputFields[inputC].getAttribute("id");
inputFields[inputC].addEventListener("blur", function(){
var emailPattern = /(\w[-._\w]*\w#\w[-._\w]*\w\.\w{2,3})/g;
var resultEmail = emailPattern.test(vrs_getWin.document.getElementById(elementT).value);
if(result) {
prompts.alert(null, "Test", vrs_getWin.document.getElementById(elementT).value);
}
}, false);
}
Any help with this will be much appreciated.
I think from a UX stand point, I would not recommend using a javascript alert to notify the user of a problem, especially if you want the notification to happen when they have completed a single form input. The blur event would be my recommendation, and use some other visual cue to notify the user.
But, if you want to go with the tab key, the event your looking for is 'keydown', or 'keyup'. To use it you listen for the keydown event then check if the event.keyCode == '9'. (tab key)
document.addEventListener('keydown', function(e){
if( e.keyCode == '9' ){
alert('You pressed the tab key.');
}
}, false);
To get the keycodes of keys I like to pop open a console and type in:
document.addEventListener('keydown', function(e){
console.log( e.keyCode );
}, false);
Then when you press a key, it will output the keycode for that key.