Check if key was pressed when hovering over a div

Question

Is it possible to check if a key on a keyboard was pressed when hovering a certain element (div) without using jQuery or a similar library?

Answer 1

Here is a pure JS implementation:

myElement = document.getElementById('mydiv');

function keyaction(e){
    myElement.innerHTML+= String.fromCharCode(e.charCode);
}

myElement.addEventListener("mouseover",function() {
    document.addEventListener("keypress", keyaction);
});

myElement.addEventListener("mouseout",function() {
    document.removeEventListener("keypress", keyaction, false);
});

Here is a demonstration: http://jsfiddle.net/bAV6f/1/

Type into the div when it is hovered.

Answer 2

Here's a plain JavaScript solution:

var yourDiv = document.getElementById("yourdiv"); //cache your div
var keyPressed = 0; //kinda-boolean flag, if it's not 0 then at least one key is pressed
document.onkeydown = function() { //when a key is "down"
    keyPressed ++; //increment the counter of "down" keys
};
document.onkeyup = function() { //when a key is "released"
    keyPressed --; //decrement the counter of "down" keys
    keyPressed = Math.max(0, keyPressed); //make sure it doesn't go negative
};
yourDiv.onmouseover = function() { //when you hover your div
    if(keyPressed !== 0) { //if a key is pressed
        //do stuff
    }
};

The above only fires the mouse events when the mouse enters your div. If you want it to fire if it moves inside it, use the onmousemove event instead:

yourDiv.onmousemove = function() { //when the mouse moves inside your div
    if(keyPressed !== 0) { //if a key is pressed
        //do stuff
    }
};

Note that you can use addEventListener instead of directly setting onkeydown, onkeyup and onmousemover -- but the concept stays the same.

Answer 3

Your answer is yes, this is possible.

You would have to add a javascript event on hover (onmouseover) over the div that sets a keydown event on the same div.

You will have to remove the keydown event when the user stops the hover again (onmouseout).

Answer 4

Short anwser

Yes, is possible

but, how can be done if it is possible?

Well, using Jquery is pretty simple:

$("div#selector").mouseover(function(e) {
  if (e.ctrlKey)
    alert('You are hover selector and pressing ctrl');
  if (e.altKey)
    alert('You are hover selector and pressing alt');
  if (evt.which == 77)
    alert('You are hover selector and pressing m');
  ...
});

See this list of key to know the javascript keycode associated with a character

Edit: I just readed your comment about not to use jQuery which should be included in the question

Answer 5

You can use the jquery for this purpose

$("p").hover(function(){
//Your code
}); 

Or

$(".selector").on({
mouseenter: function () {
//stuff to do on mouseover
}, 
mouseleave: function () {
//stuff to do on mouseleave

}

});