Localising key combination detection to specific active parts of DOM - javascript

I need to detect keystroke combinations in one active (focused) element. However when I have focus on another element and the same keystrokes are pressed, the action shouldn't be fired.
I seem to have trouble doing this. Any help will be appreciated.
Thanks.

You could check out my jQuery plugin that would allow you to do this by selecting the element then picking the key like:
$('input').jkey('alt+a',function(){
console.log('You pressed alt+a!');
})
Docs:
http://oscargodson.com/labs/jkey/
Source:
https://github.com/oscargodson/jkey

Related

How to detect rightclick + cut/delete/paste/undo in javascript?

In my JavaScript/jQuery code, I have a text field that I run an event when the text changes using the keyup event. However currently I only account for changes done using the keyboard.
Is there a way I can detect when a text field text changed because the user did a right click and clicked on cut or delete or paste or undo?
Note: This needs to work in IE9, and preferably Firefox and chrome, but definitely needs to work in IE9.
Thanks
jsFiddle Demo
Use jquery to bind an input event to the element like this:
$('#myInput').bind('input',function(){
//use this for the input element when input is made
var inputValue = this.value;//for example
});
As a start, this is not really the correct way to do it. But if you react on the mouseout event of a input you will most likely get it to behave the way you want.
$('#input').mouseout(function(){
if($('#input').is(":focus"))
console.log("Right-click");
});
Though it is to note that this might not work as well on textareas since they tend to be larger and the mouse might not be outside of it when the contextmenu has been clicked.
Note: Other than #Travis J that react to all interaction, this will (probably) only trigger an event on rightclick (and regular mouseout).

Detect if input has focus

One of my web app's page consists of a grid and a search box. I capture the keypress event to select through each of the grid's rows using the space bar. However, this creates a problem for when someone wants to look up a phrase in the search box.
I know that jQuery has a .focus method to bind an event handler to an input or give focus to an element. But how do I get a boolean value to determine if the search input has focus or not?
try this
if ($("#id").is(":focus")) {
alert('focus');
}
you can find more info on below link :
Using jQuery to test if an input has focus
Like so?
if($('...').is(':focus')){
}
Perhaps:
$(this).is(":focus");

jQuery Click element, then remove it

I'm stuck with a concept, not sure if my logic is right, it most likely isn't.
I'm hoping to achieve a div delete. So I click the div and it makes it the active div and then I can delete it with the backspace key.
So the flow is -. Click Element - Hit Backspace - $(this).remove();,
but not sure how to target the element with a click. I had:
$(".spike").live(event, function(del) {
if (del.keyCode == 8) { $(this).remove();}
});
but it doesn't work. (The event is bound to click and ipad touch).
Basically is there any way I can use the click event to target a div, maybe to a global variable, that then allows me perform actions to it?
Well the idea is to select an item, and save the selection. Then if the key you want is pressed, delete that item.
Look at this example:
http://jsfiddle.net/GVgEy/5/
change "event" for "click" which is the event you want to handle.
$(".spike").live("click", function(del) {
if (del.keyCode == 8) { $(this).remove();}
});
Hm... I have little to offer but a demo http://jsfiddle.net/E8RaX/1
but the idea is that you assign a class to the active object and then with some prevent defaults you remove any divs with that class.

Detect change of select list using Jquery

Is there a way to detect when the value of a select list is set to empty by a javasscript and not by the user? It seems that the change-event only triggers by mouse or keyboard.
And is there a way to detect when the number of options in a select list changes (added, removed)?
You have to trigger the change event manually, when you are changing the value of a select with javascript. E.g:
$('#myselect').val(10).change();
In this example the value is set to 10 and the change event is triggered. If there is an event handler attached to the select, it will be executed.
Use Jquery's change function
$("#idofselect").change(function(){ });
To answer your first question, not it's not possible to detect what caused the change in the select list in the change event itself.
However, if there is javascript code changing the select list you could add some logic in there to perform the tasks needed in this scenario.

How do I ignore a keyEvent in Javascript?

I have a DataTable in YUI. I'm trying to get the table to ignore all keyEvents. I've tried these methods:
YAHOO.util.Event.addListener(singleSelectDataTable, "keydown", function(oEvent) {
YAHOO.util.Event.stopPropagation(oEvent);
});
OR
YAHOO.util.Event.preventDefault(singleSelectDataTable.tableKeyEvent);
OR
singleSelectDataTable.subscribe('tableKeyEvent', function(oArgs) {
YAHOO.util.Event.preventDefault(oArgs.event);
});
I've looked at a couple of YUI examples to intercept click events, but they don't analogize to this specific scenario. I created a standalone HTML test file if that will help: http://pastebin.com/khfR4Stk. The foundational problem is that we don't want to support arrow key up or arrow key down in our tables; it's a scrolling table and in order for it to work properly we would have to adjust the scrolling thumb once the selection goes past the 'shown-window'.
The only other solution I could think of is to subscribe to the tableKeyEvent and then if the keypress is up-arrow, then unselect the newly selected row, selecting the previous row, doing the appropriate analogue for a down-arrow (basically undoing what the keypress just did). This didn't seem like the right solution…
The tableKeyEvent is raised after the up/down arrow key has been handled. So trying to stop that event will not help.
Looking at the _onTbodyKeydown function of the DataTable widget, I noticed that setting the selection mode to an invalid mode disables key arrow key navigation. Luckily it doesn't seem to break the other selection handling. At least not in your example.
So just change selectionMode:"single" to selectionMode:"" and you should be fine :-)
(Of course there is no guarantee that this will work in future versions)
Try creating the equiv of this onclick
function noenter(evt)
{
var k = evt.keyCode||evt.which;
return k != 13;
}
Get the syntax for getCharCode and tell the script that when it receives input, it needs to deny it.
can't you just add an eventhandler that returns false to the keydown event?

Categories