CODEWITHSUNDEEP
javascriptjquerykeyboardfabricjs
Pedro Jose
Pedro Jose

Reputation: 442

Keydown event in a certain element of the DOM

Is it possible to capture the event of a combination of keyboard keys, in a single element of the DOM? I mean, what I want is that if I have a

<div id="k"><input id="text" type="text"></div>
<div id="j"><input id="text" type="text"></div>

And I just want to pick up the combination of keys Ctrl+H on the div with id "k"

Upvotes: 0

Views: 2612

Answers (3)

Pedro Jose
Pedro Jose

Reputation: 442

Solved adding a tabindex 1 to the ".upper-canvas " (yes with blank space) element and then binding the keydown on the ".upper-canvas " with jQuery.

var canvas = new fabric.Canvas('c');
$(document).ready(function(){
    $(".upper-canvas ").attr('tabindex', 1);
})
$(".upper-canvas ").on("keydown", function(event){
    console.log("Hi");
});

JSFiddle Solution

Upvotes: 2

Nisarg Shah
Nisarg Shah

Reputation: 14541

You can bind a keydown (or a keyup) event. Then check if the Control key is pressed using event.ctrlKey property, and get the currently pressed key using event.key property. If both of them are pressed event.ctrlKey && event.key == 'h' will be true.

Notice that at the end of the event handler, I am calling event.preventDefault(). It prevents the default action, in this case, browser's shortcut of Ctrl + H from being activated.

$("#k").on("keydown", function(event) {
  console.log(event.ctrlKey, event.key);
  
  if (event.ctrlKey && event.key == 'h') {
    alert("Ctrl + H pressed");
  }
  
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="k"><input id="text" type="text"></div>
<div id="j"><input id="text" type="text"></div>

Upvotes: 0

Akash Srivastava
Akash Srivastava

Reputation: 292

Try using 

<input id="text" type="text" onkeydown="myFunction1(event)"></div>
<div id="j"><input id="text" type="text"></div>
<script>
function myFunction1(ev) {console.log(ev);}
</script>

You can also read at W3schools

Upvotes: 1

Related Questions