We Keep Coding

How to disable key bindings in X3DOM

I am using X3DOM for a simple game, but I can't use keyboard keys the way I want to, because X3DOM reacts to them.
Example:
window.addEventListener('keydown', event => this.onKeyDown(event));
I want to have my own key event for if keyCode == 68. That works, but X3DOM reacts to it too, by changing the navigation mode and displaying an overlay.
How can I disable this?

disclaimer: I've never used x3dom, I was just poking around in the source code
there appears to be some code which disables keypress handling
this.disableKeys = x3dElem.getAttribute("keysEnabled");
this.disableKeys = this.disableKeys ? (this.disableKeys.toLowerCase() == "true") : false;
which is later read when setting up the keypress event handler:
this.onKeyPress = function (evt) {
if (!this.parent.disableKeys) {
evt.preventDefault();
this.parent.doc.onKeyPress(evt.charCode);
}
this.parent.doc.needRender = true;
}
So it appears setting keysEnabled=... attribute can turn this off. The oddity appears to be that their logic is backwards (?) for the condition:
x3dElem.getAttribute("keysEnabled") must be truthy (that is, it must have an attribute)
if that is falsey, this.disableKeys is always false
otherwise it is equal to that attribute's value lower-cased being equal to 'true'
So to disable keypress events, use <... keysEnabled="true" ...>
I made a github issue about the backwards logic, perhaps in the future it will be keysDisabled="true" instead
update:
in the latest version the attribute has been renamed to disableKeys so use <... disableKeys="true" ...>

You can use event.preventDefault to prevent X3DOM from reacting to that key:
window.addEventListener('keydown', event => {
if ((event.which === 68) || (event.keyCode === 68)){
event.preventDefault();
//
// ...
//
}
});

jQuery plugin not firing correction keydown or idle events

I am programming a jQuery plugin which tracks specific events. I have provided 2 JSFiddle examples for the sanitised code to assist at the end of the question.
I am struggling to fathom why 2 particular events are not firing. The first function tracks when the user triggers the backspace or delete keys within an input or textarea field. The code for this:
// Keydown events
$this.keydown(function (e) {
var keyCode = e.keyCode || e.which;
// Tab key
if (e.keyCode === 9) {
alert('tab key');
} else if (e.keyCode === 8 || e.keyCode === 46) { // Backspace and Delete keys
if ($this.val() !== '') {
alert('Backspace or delete key');
}
}
});
I only wish to track the error-correction keys when a field is not empty. The tab key in the above example works as expected within the conditional statement. The backspace and delete keys do not work when inside the plugin and targeting the element in focus.
The second event not firing is tracking whether a user becomes idle. It is making use of jQuery idle timer plugin to manipulate the element in focus.
// Idle event
$this.focus(function() {
$this.idleTimer(3000).bind('idle.idleTimer', function() {
alert('Gone idle');
});
}).focusout(function() {
$this.idleTimer('destroy');
});
With both of these events I have refactored the code. They were outside of the plugin and targeted $('input, select, textarea') and worked as expected. I have brought them inside the plugin, and set them to $(this) to manipulate elements currently in focus. For most of the functions, this has worked without fault, but these 2 are proving problematic.
The first JSFiddle is with the 2 functions inside the plugin. tab works, whereas the correction keys do not. Strangely, in this example the idle function is firing (it does not in my dev environment). As this is working in the JSFiddle, I accept this may be difficult to resolve. Perhaps suggestions on handling an external plugin within my own to remedy this?
Fiddle 1
The second JSFiddle has taken the backspace and delete key functionality outside of the plugin and targets $('input, select, textarea') and now works.
Fiddle 2

For Fiddle1:
if ($this.val() !== '') {
alert('Backspace or delete key');
}
Look at what $this actually is.

Capture keycode on input's with same class

I have a page with many text input's. All input's share the same class for many reasons.
Now I am trying to capture a the ESC button when an input is focused and alert if the input has value or not.
Now this logically works only for the first field. After the first field, since all input's share the same class, when I press ESC button it gives you the value of the very first input.
So how can I say that I'm talking for the second, fifth or whatever input I am pressing ESC on.
Here is an example: http://jsfiddle.net/Y5e9W/
The first input works fine, the second input thought; when you press ESC it gives you the values of the first.

You should be able to bind the keyup event to the elements with your class, rather than the document. Then this will refer to the element with focus:
$(".gp").keyup(function(e) {
if(e.which === 27) {
if(this.value.length > 0) {
//Has a value!
}
else {
//Empty!
}
}
});
Here's an updated fiddle. Note that I've used the which property of the event object, which jQuery exposes to deal with browser differences between keyCode and charCode.
Update based on comments
If you do need to handle this at the document level, you can use the has method to narrow down your selection of .gp elements to the one which has focus:
if (gj.has(":focus").val() != 0) { //...
Here's another fiddle.

You could do -
$(".gp").keyup(function (e) {
if ($(this).is(":focus") && (e.keyCode == 27)) {
if ($(this).val() != 0){
alert('full');
$(this).val('');
}else{
alert('empty');}
}
});
Which will only respond to the keyup event of elements with the 'gp' class, you can then use this to access the relevant element.
Demo - http://jsfiddle.net/uqS72/2/

disable tabbing on document but enable input tabbing?

I have added the following code to my site to prevent tabbing, this applies to the whole document. Problem is that this obviously disables all tabbing throughout the site, how can I add a rule in to allow inputs to be tabbed? I tried adding .not('input') but this doesnt seem to work.
$(document).keydown(function(objEvent) {
if (objEvent.keyCode == 9) {
objEvent.preventDefault();
}
});
Thanks

You can check the value of document.activeElement.tagName.
If nothing is selected, document.activeElement will be the body tag in FireFox, Chrome, and the html tag in IE 7/8/9.
$(document).keydown(function(objEvent) {
if (objEvent.keyCode == 9) {
if (document.activeElement.tagName != 'INPUT')
objEvent.preventDefault();
}
});

The keyup event properly also sends a target with it.
objEvent.target should return the current target the user is at.
So checking up on if the target is an input field then ignore the preventDefault...
Edit: Not sure if this is gonna work. "wsanville" method looks more legit.

keydown event for form or div in html

I am displaying a form inside a div tag as a dialog to enter details.
In this form, I want to handle the ESC key using jQuery.
If any input tags have focus, keydown event will trigger. If the focus is on the form but not on any input tags then it will not trigger keydown event.
Here is my code:
$("#NewTicket").keydown(function(e) {
var unicode = e.keyCode ? e.keyCode : e.charCode
if (unicode == 27)
{
if (confirm("Are you sure you want to cancel?"))
return true
else
return false
}
});

Just add an id,class to the form
<form id="form">
....
and now do this :
$("#NewTicket,#form").keydown(function(e)
{
var unicode=e.keyCode? e.keyCode : e.charCode
if(unicode == 27)
{
if (confirm("Are you sure you want to cancel?"))
return true
else
return false
}
)};
This should work

You can't focus on forms. If you wan't to handle keydown on elements that don't get focus (such as divs or forms) you have to bind it to the document.
Turns out that jQuery automatically adds :focus selector which enables you to find the focused element by using $(':focus')

I believe that if you put your form in an element made focusable using tabIndex, like , or this focusable div is the container element inside the form, then you can bind the keyDown to this div instead. It works cross browser as far as I've tested but I've not seen this solution discussed much, so curious as to anyone's comments about this.

I know this is an old question but someone still might be looking for an answer.
Usually, I do capture key down at global level then forward it to a function and handle it there. For your needs, you can get nodeName. (Tested in FF, Chrome)
$(document).keydown((e)=>{//Capture Key
if(["INPUT","TEXTAREA"].indexOf(e.target.nodeName)!==-1){//If input in focus
console.log("INPUT FOCUSED",e.code,e.keyCode);
if(e.keyCode==27 || e.code=="Escape"){//Capture Escape key
console.log('ESC');
}
}
});