I am adding Javascript in Vaadin 6 by making a new empty component that only has my JS. Basically I just want to disable Tab key press event on my fields. I searched internet but not found any solution with in vaadin. So I suggested use js to disable Tab key event. The JS that is disabling Tab key is:
$( document ).ready(function() {
$(".v-absolutelayout-WebFormTable input").keydown(function(event) {
if (event.keyCode == 9) //tab pressed
{
event.preventDefault(); // stops its action
}
});
});
I am adding the component having the JS on my desired component. On first attempt, it worked as expected. But this solution is not reliable. It donot now works now.
Can any one tell me any relaible way to disable tab key press on fields? I just want to disable tab key on only selected fields, not on all of the browser page.
Check out the addShortcutListener method. You can use it to detect that the tab key has been pressed.
Related
How to write conditions for an automatic mouse click in the UI when we press any key on the keyboard.
I'm Working on the Accessibility Part ->
My Scenario is we are having banner which is displayed when the page loads initially. for that until we close that banner the focus should be inside that banner.
I have tried the onKeyDown event. when we trigger the onKeyDown event by using e.preventDefault() the focus is hidden. I need to get that focus again when I click any key on the keyboard.
Thanks in Advance.
handleTab = (e) => {
let tabKey = false
if (e.keyCode === 9) {
e.preventDefault()
tabKey = true
}
if(tabKey) {
# here I need an automatic browser click event. so that when I hit the tab key it will go inside of that banner
}
onKeyDown = {this.handleTab()}
Try to use tabindex property to prevent tab navigation outside the banner.
<input type="text" tabIndex="-1"/>
I created small demo to test: https://codepen.io/mich_life/pen/vYRMpqe
This is what the MDN documentation has to say about keyCode:
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
key which is a textual representation of the pressed key should be used instead & has been supported since Internet Explorer 9.
Since you haven't specified, if the banner is inside or outside your component, I am going by outside.
handleTab=(evt)=> {
if(evt.key == 'Tab') {
evt.preventDefault();
document.getElementById('banner').focus();
}
}
If it's rendered inside your component, use a ref instead.
I am trying to use this jQuery Keyboard shortcuts plugin https://github.com/jeresig/jquery.hotkeys in my JavaScript app.
I am having an issue where the bind method which enables the event listener to start listening for my key presses works however the unBind method does not seem to be working.
Here is an example: http://jsfiddle.net/80k2uf3w/13/
// Enable our keyboard shortcut for the "number 1 key"
function bindOneKey(){
alert("keyboard Event listener is now listening for key number 1 to be pressed!");
jQuery(document).bind('keydown', '1',function (evt){
alert("keyboard key number 1 was pressed");
return false;
});
}
// Disable our keyboard shortcut for the "number 1 key"
function unBindOneKey(){
jQuery(document).unbind('keydown', '1');
alert("keyboard Event listener for key number 1 has been killed!");
}
// Demo buttons to enable/disable our Keyboard shortcut Event listeners
$(document).ready(function(){
$('#bindOne').bind('click', bindOneKey);
$('#unBindOne').bind('click', unBindOneKey);
}
HTML Buttons for Demo
<input type="button" id="bindOne" value="Bind 1 keyboard key" />
<input type="button" id="unBindOne" value="unBind 1 keyboard key" />
On that demo page after pressing the bind 1 button, you can then press the number 1 key on your keyboard and get an alert from the callback function.
After that if you press the unbind 1 button and then press the 1 key again, it still works instead of un-binding it!
Does anyone know what the problem could be?
This is just the most basic demo to show the functionality and the problem. My real app will basically enable the keyboard shortcuts when a Modal is opened and then disable/unbind them when the Modal is closed. That is why i need to get this working.
My other option is to find a new Keyboard shortcut library, there are about 50 of them it seems but I liked this one because it seems to be pretty lightweight and also built by a very well know JavaScript developer. So I am posting here to see if we can get this one working 100% first.
One thing to note is that on the GItHub page for the library it seems the test files are using a jQuery v1.4.x older version, perhaps that could be part of the issue but I am not sure as majority of the library works and also I get no console errors!
Thanks for any help
I found a similar question with someone else trying to do the same thing enable and disable the keyboard shortcuts as a Modal opens and closes using this library in this question jQuery Hotkeys - unbinding?
It seems there isn't any perfect solution so I will probably look at other libraries or maybe just manually code the key shortcuts I need with jQuery without a library. It might give me more control.
I am using JQuery Mobile to developing my own app for BlackBerry based on WebWorks(HTML5,CSS3,JS) tecknologies.
On my layout div i have 3 input elements.
I am wont to detect BlackBerry enter key pressed in first input to focus on next input.
How i can check if hardware enter key(and other keys like "T","R","D") pressed using JQuery Mobile??
There's nothing specific to jQuery Mobile for this. You just need to add an event listener on the input and listen to the appropriate keypress event. You can find a nice explanation for them here.
Here's some sample code to get you started (not tested, you might need to debug):
$('#firstInput').keypress(function(event) {
if ( event.which === 13 ) {
$('#secondInput').focus();
}
);
In the event.which, the key code gets checked (13 is for enter). Other keys have different key codes. Be careful, I remember a bug on Blackberry that it wouldn't trigger the keypress event for backspace.
Be more specific about your problem if you need more details.
I have a form built in ASP.NET. The first control allows the user to choose a person from an auto-complete list. When the user pressed enter it would refresh the page and duplicate any information acquired through this first control. I am trying to remove the capability of the enter key from refreshing the page. This code all works in Chrome and IE7/8/9 (Don't care about 6). All I NEED is the return false for it to work in all browsers we support besides Firefox. The .click() is a bonus to add a bit of usability back to the key (so that it will activate the controls and check or uncheck check boxes, etc.)
None of this works in Firefox 12. The click occurs (proof that the code is reached when I want it) but the page refreshes every single time.
The focusNextInputfield() was one of the suggestions from a similar question and didn't do anything I wanted. It may have done what it was intended for but I can't tell because the page refreshed.
I found preventDefault() and stopPropagation() from yet another similar question on my own and it did nothing in FF.
I have even tried returning true for the heck of it.
$(document).keydown(function (event) {
//handles what happens when the user hits enter
if (document.activeElement.nodeName !== 'TEXTAREA') {
if (event.keyCode === 13 || event.which === 13) {
$(document.activeElement).click();
// $(document.activeElement).focusNextInputField();
event.preventDefault();
event.stopPropagation();
return false;
}
}
});
I am just looking for any suggestions or news on any reason none of this has any effect in FireFox 12? And I know that the code is reached and it all runs properly without error and even with all the excess code it still runs properly in Chrome and IE 7/8/9 as I said.
And through an earlier iteration I tried forcing the submit button to be clicked but it still refreshed anyway and validated and was overall a bad user experience.
Looks like you are using jQuery so all you need is to preventDefault in form submit event.
$j("#form-id").submit(function(e) {
e.preventDefault();
...
});
Or:
$j("#form-id").submit(false);
I'm building my first application where I have to have compliance with keyboard navigation for accessibility reasons.
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
When the user does this, it isn't always possible to tab back into dialog box. IE8 and FF8 behave somewhat differently in this respect. I've tried to capture the tab key with the following event handler -
lastButton.keydown(function (e) {
if (e.which === TAB_KEY_CODE) {
e.stopPropagation();
$(this).focus();
}
});
But this doesn't work as it appears the browser processes the key press after jquery is done.
Two questions -
For Accessibility compliance, do I even have to worry about this? Although, for usability reasons, I think that I should.
Is there a way to make this work?
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
... and then tabbing occurs below the modal box, under a grey semi-transparent layer with scrollbar jumping from bottom to top after a few keypresses? Yes, this is a concern for sighted users who use the keyboard to browse and won't know how to go back to the modal box without pressing Tab a hundred times. Blind people won't even know the modal box is still displayed (they still can see/hear the entire DOM with their screen reader!) and that the page/script is waiting for a submit or cancel decision so it's also a concern for them.
An example done right is shown at http://hanshillen.github.com/jqtest/#goto_dialog (click on Dialog tab, direct link with anchor doesn't work :/ ). It'll tab forever inside the modal box till you click on Close or OK and will put you back on the focused element that triggered the modal box (I think it should focus the next focusable element after leaving the modal box but nevermind, this isn't the biggest accessibility problem here).
This serie of scripts is based on jQueryUI and are highly improved for keyboard and ARIA support and any accessibility problem that could exist in the original scripts. Highly recommended! (I tried to mix jQuery UI original scripts and these ones but didn't manage to get anything working, though you don't need to do so: these scripts work fine by themselves)
Maybe you should prevent the default action with preventDefault() instead of stopping the propagation and use keypress instead of keydown.
In this way there should be no need to regain focus.
Stopping the propagation doesn't work because it just prevent the event from bubbling up. You could think about using stopImmediatePropagation() but i think that changing input on the pression of the tab can't be stopped that way and preventDefault() is more correct.
lastButton.keypress(function (e) {
if (e.which === TAB_KEY_CODE) {
e.preventDefault();
}
});
fiddle here: http://jsfiddle.net/jfRzM/
Im a little late to the party, but I found I had to call preventDefault in the other keyboard events as well.
ex) I was setting the focus in the keyup event. But the browser was still doing its thing in either keydown or keypress. So I had something like this (I used JQuery/Typescript, but the idea should translate to about anything):
elem.keyup(this.onDialogKeyPress);
elem.keydown(this.onDialogPressPreventDefault);
elem.keypress(this.onDialogPressPreventDefault);
...
private onDialogPressPreventDefault = (e: KeyboardEvent) => {
const keys = [9, 27];
if (keys.includes(e.which)) {
e.preventDefault();
return false;
}
}
private onDialogKeyPress = (e: KeyboardEvent) => {
// Tab
if (e.which == 9) {
e.preventDefault();
// Do tab stuff
return false;
}
// Esc
else if (e.which == 27) {
e.preventDefault();
// Do Esc stuff
return false;
}
}