Develop Reference

jQuery event trigger is not working on annotorious and seadragon

I am trying to get the down arrow keyup event to fire automagically using jQuery. The annotorious/seadragon combination has a listener that opens all preconfigured tags when I press the down arrow.
I have written jQuery code to find the input field, put focus on it and then trigger the keyup event.
function triggerDownArrowOnInput() {
$("[id^=downshift][id$=input]").each(function(index) {
// There should only be 1, but let's not assume.
console.log(index);
if (index == 0) {
console.log("Found an input: " + $(this).attr("id"))
$(this).focus();
var event = jQuery.Event("keyup");
event.keyCode = event.which = 40; // down arrow
$(this).trigger(event);
} else {
console.log("Multiple elements found that match the id: " + $(this).attr("id"));
} // if
})
} // triggerDownArrowOnInput
The focus is working great, but not the trigger. If I manually hit the down arrow key, then the preconfigured tags all appear:
I have tried "keyCode" and "which" separately.
I have tried triggering $(this).keyup(event).
I have tried putting in a delay between the focus call and the trigger/keyup call.
I have tried calling $(document).trigger(event).
I thought maybe I was sending the event to the wrong element, but it appears (going through Dev tools) that only the Input field and the document have the listeners enabled.
No matter what I do, I can't get the event to fire. Any ideas?
Thanks.

I think I've got this working without jQuery, using a KeyboardEvent and dispatchEvent. With my tests I don't think you need the focus before hand either because it's an event on the element, but worth testing this on your application.
function triggerDownArrowOnInput() {
$("[id^=downshift][id$=input]").each(function(index) {
// There should only be 1, but let's not assume.
console.log(index);
if (index == 0) {
console.log("Found an input: " + $(this).attr("id"))
$(this).focus();
this.dispatchEvent(new KeyboardEvent('keyup',{'keyCode': 40, 'key':'ArrowDown', 'code':'ArrowDown'}));
} else {
console.log("Multiple elements found that match the id: " + $(this).attr("id"));
}
})
}

Have you tried keydown?
var e = jQuery.Event("keydown");
e.which = 40;
e.keyCode = 40
$(this).trigger(e);
function triggerDownArrowOnInput() {
$("[id^=downshift][id$=input]").each(function(index) {
// There should only be 1, but let's not assume.
console.log(index);
if (index == 0) {
console.log("Found an input: " + $(this).attr("id"))
$(this).focus();
var event = jQuery.Event("keydown");
event.keyCode = event.which = 40;
$(this).trigger(event);
} else {
console.log("Multiple elements found that match the id: " + $(this).attr("id"));
}
})
} // triggerDownArrowOnInput

I was able to get the event to fire, but still wasn't able to open the menu on focus. I ended up having to create a development environment for:
recogito/recogito-client-core
recogito/recogito-js
recogito/annotorious
recogito/annotorious-openseadragon
I then modified Autocomplete.jsx in recogito/recogito-client-core, added an OnFocus listener and then added the following code:
const onFocus = evt => {
if (!isOpen) {
this.setState({ inputItems: this.props.vocabulary }); // Show all options on focus
openMenu()
} // if
} // onFocus
Way more than I wanted to do, but it is working now.

How can I use javascript to sequentially show one div at a time?

I'm trying to have a page where one div gets shown and then when the user hits the spacebar, that div gets hidden and the next div gets shown. I'm starting out using CSS to set the visibility of all divs to hidden, but when I press space nothing happens.
$divID = 0;
document.getElementById("div0").style.visibility="visible";
function updateDiv(event){
// If the spacebar was pressed
if (event.type == "keydown" && event.which == 32){
// Hide the current div
$doc.getElementById("div" + $divID).style.visibility="hidden";
++divID;
// Move to next div
$doc.getElementById("div" + $divID).style.visibility="visible";
}
}
// Handle events
document.on("keydown", updateDiv);

You're not very consistent, the variable names change as you go, document is not a jQuery object and has no on() method etc.
var divID = 0;
document.getElementById("div0").style.visibility="visible";
function updateDiv(event){
// If the spacebar was pressed
if (event.type == "keydown" && event.which == 32){
// Hide the current div
document.getElementById("div" + divID).style.visibility="hidden";
++divID;
// Move to next div
document.getElementById("div" + divID).style.visibility="visible";
}
}
// Handle events
$(document).on("keydown", updateDiv);
FIDDLE

How about this fiddle?
var ctr = 1;
var max = 3;
$(document).on('keypress', function (e)
{
if (e.which == 32)
{
$('div').hide();
$('#d' + ctr).show();
ctr++;
if (ctr > max)
ctr = 1;
}
});

I changed up your code a little to use jQuery (since it was listed as a tag, I assumed it was available). This code lets you set up as many divs as you want, doesn't show a new div until the old one is hidden, and keep the last div visible once it's reached:
$('div').hide();
$('div:first').show();
$('body').keypress(function(event) {
$visdiv = $('div:visible');
if(event.which == 32 && !$visdiv.is(':last')) {
$visdiv.hide(400, function() {
$(this).next('div').show();
});
}
});
Fiddle for demonstration.

doc is not defined.
you need var doc = document;
You event handler needs to hook to window.
window.addEventListener("keydown", updateDiv);
You don't need $ in front of regular variables.
You're not really using jQuery, so leave it out.

HTML:
<div class="bloc selected">Bloc 1</div>
<div class="bloc hidden">Bloc 2</div>
<div class="bloc hidden">Bloc 3</div>
<div class="bloc hidden">Bloc 4</div>
JS:
$(document).on('keypress', function (e) {
var code = e.keyCode || e.which;
if(code == 32) {
var next = ($('.selected').next('.bloc').length > 0) ?
$('.selected').next('.bloc') : $('.bloc1');
$('.selected').toggleClass('selected hidden');
next.toggleClass('selected hidden');
}
});
CSS:
.selected {
display:bloc;
}
.hidden {
display:none;
}
FIDDLE: http://jsfiddle.net/Zq8j2/2/

Keypress in backbone.js?

It looks like key-press can only be executed on a focus element? I don't fully buy into that, there has to be a way to execute a key-press event similar to a click event?
I have a view that works with one item at a time. I have a mouseenter - mouseleave function that adds a class to the item the mouse is over. When the item receives that class I want to be able to use a key-press event to run a function on that item.
Obviously this is a slight obstacle but Id like to find out what I need to do. Below is an example view.
var PlayerView = Backbone.View.extend({
tagName: 'div',
events: {
'click .points, .assists, span.rebounds, span.steals':'addStat',
'mouseenter': 'enter',
'mouseleave': 'leave',
'keypress': 'keyAction'
},
enter: function() {
this.$el.addClass('hover');
},
leave: function() {
this.$el.removeClass('hover');
},
keyAction: function(e) {
var code = e.keyCode || e.which;
if(code == 65) {
alert('add assist')
}
}
});
So there isn't much logic here, but I am thinking I would write something like this
keyAction: function(e) {
var code = e.keyCode || e.which;
if(code == 65) {
var addAssist = parseInt(this.model.get('assists')) + 1;
this.model.save({assists: addAssist});
}
}
Basically If I could figure out how to fire that keyAction method I should be good to go. So what are some caveats I am missing in executing some code like this? I am sure there are a few.
I do understand some of what is wrong with this code, it has no way of knowing when we run keypress in that view, I would have to add a conditional or something to find the active class, so when I execute the keypress it knows what model I am talking about, very vague description here but I get there is something wrong I am just not sure how to do this?
My solution
initialize: function() {
this.listenTo(this.model, "change", this.render);
_.bindAll(this, 'on_keypress');
$(document).bind('keydown', this.on_keypress);
},
enter: function(e) {
this.$el.addClass('hover');
},
leave: function(e) {
this.$el.removeClass('hover');
},
on_keypress: function(e) {
// A for assist
if(e.keyCode == 65) {
if(this.$el.hasClass('hover')) {
var addThis = parseInt(this.model.get('assists')) + 1;
this.model.save({assists: addThis});
}
}
// R for rebound
if(e.keyCode == 82) {
if(this.$el.hasClass('hover')) {
var addThis = parseInt(this.model.get('rebounds')) + 1;
this.model.save({rebounds: addThis});
}
}
// S for steal
if(e.keyCode == 83) {
if(this.$el.hasClass('hover')) {
var addThis = parseInt(this.model.get('steals')) + 1;
this.model.save({steals: addThis});
}
}
// 1 for one point
if(e.keyCode == 49) {
if(this.$el.hasClass('hover')) {
var addMake = parseInt(this.model.get('made_one')) + 1;
this.model.save({made_one: addMake});
var addOne = parseInt(this.model.get('points')) + 1;
this.model.save({points: addOne});
}
}
// 2 for two points
if(e.keyCode == 50) {
if(this.$el.hasClass('hover')) {
var addMake = parseInt(this.model.get('made_two')) + 1;
this.model.save({made_two: addMake});
var addTwo = parseInt(this.model.get('points')) + 2;
this.model.save({points: addTwo});
}
}
// 2 for two points
if(e.keyCode == 51) {
if(this.$el.hasClass('hover')) {
var addMake = parseInt(this.model.get('made_three')) + 1;
this.model.save({made_three: addMake});
var addThree = parseInt(this.model.get('points')) + 3;
this.model.save({points: addThree});
}
}
}
This is cool for my app because when the user hovers over the item the user can hit a key to add data, instead of clicking.

So you are only going to be able to listen to the keypress in whichever element that you have the listener set on (or its children). And the keypress event is only going to fire if the element is focused. So I think the best solution for you would be to set focus on the element you are hovering over, then you can listen for the keypress, or better yet, listen to keydown because it behaves in a more standard way cross browser.
Here is a working JSFiddle demonstrating this technique: http://jsfiddle.net/DfjF2/2/
Only certain form elements accept focus. You can add contenteditable or tabindex attributes to the element, and that should allow pretty much any element to receive focus, but then the keydown event won't actually get fired! This is a browser specific issue. In my experience, a <span> will cause keydown and keyup events to be fired in every browser I have tested (Chrome, Firefox, IE, Safari, Android browser, Silk). So in the jsfiddle I added a span inside the target element, put focus on that, and added the keydown event listener to it.
So if you added an empty <span> into your view, your code could look something like this:
var PlayerView = Backbone.View.extend({
tagName: 'div',
events: {
'click .points, .assists, span.rebounds, span.steals':'addStat',
'mouseenter': 'enter',
'mouseleave': 'leave',
'keydown': 'keyAction'
},
enter: function() {
this.$el.addClass('hover');
var span = this.$el.find('span');
span.attr('tabindex', '1').attr('contenteditable', 'true');
span.focus();
},
leave: function() {
this.$el.removeClass('hover');
var span = this.$el.find('span');
span.removeAttr('contenteditable').removeAttr('tabindex');
span.blur();
},
keyAction: function(e) {
var code = e.keyCode || e.which;
if(code == 65) {
alert('add assist')
}
}
});

Keyboard shortcut for hyperlink (jQuery)

I have six links on my webpage (and nothing else) and I would like to number each, 1 to 6. It would be nice to have the client hit corresponding number key without the ctrl and alt, etc.
Is this possible and what would be the best approach with jquery or other html scripts?

Here is one version, for jQuery:
$(document).ready(function() {
$("body").keypress(function(event) {
var link = "#link";
if(event.keyCode == 49) link += 1;
if(event.keyCode == 50) link += 2;
if(event.keyCode == 51) link += 3;
if(event.keyCode == 52) link += 4;
if(event.keyCode == 53) link += 5;
if(event.keyCode == 54) link += 6;
if(link != "#link") $(link).trigger("click");
});
});

Without control + key: keypress event listener in query, and listen for a particular key code per button.
With control + key: You could use an access key (http://www.cs.tut.fi/~jkorpela/forms/accesskey.html)

If you want to do this without the alt or ctrl key you'll need JavaScript. You could attach an event lister to the html or body tag and listen for the keypress event. Don't use complex 'if' statements, that is not necessary. It can be elegant like this (using jQuery):
link1
link2
etc
$('body').keypress(function(e) {
$('[code=' + String.fromCharCode(e.keyCode-48) + ']').click();
});
With the ctrl/alt key you could use the accesskey html attribute: http://reference.sitepoint.com/html/a/accesskey

$('body').bind('keypress', function(e) {
if(e.keyCode==49){ // number 1 on the keyboard been pressed
$('firstHref').click();
} else if(e.keyCode==50) { // number 2
$('secondHref').click();
} else if(e.keyCode==51) { // number 3
$('thirdHref').click();
}else if(e.keyCode==52) { // number 4
$('fourthHref').click();
}else if(e.keyCode==53) { // number 5
$('fiveHref').click();
}else if(e.keyCode==54) { // number 6
$('sixHref').click();
}
});

You can try something like this: Link (click the run button then click inside of the 'Result' box before you hit the numb keys.
$('body').bind('keypress', function(e) {
if(e.keyCode==49){ // 1
alert('1 key pressed');
window.location = "http://www.stackoverflow.com/"
}
if(e.keyCode==50){ // 2
alert('2 key pressed');
window.location = "http://jsfiddle.net/"
}
if(e.keyCode==51){ // 3
alert('3 key pressed');
window.location = "http://www.google.com/"
}
if(e.keyCode==52){ // 4
alert('4 key pressed');
window.location = "http://www.stackoverflow.com/"
}
if(e.keyCode==53){ // 5
alert('5 key pressed');
window.location = "http://jsfiddle.net/"
}
if(e.keyCode==54){ // 6
alert('6 key pressed');
window.location = "http://www.google.com/"
}
});​

Detect double Ctrl keypress in JS

I have a custom CMS and would like to add a "shortcuts menu" triggered by the pressing of the Ctrl key twice within, say, 300 milliseconds.
I use prototype, so my starting point obviously is:
Event.observe(document, 'keypress', function(event)
{ if(event.keyCode == Event.KEY_XYZ) { show_shortcuts});
My approach at the moment would be populating a global variable with the current time in milliseconds, and checking on each keypress whether a keypress has happened less than 300 milliseconds ago.
But maybe there is a more elegant solution?

This should work. Maybe add some further checking if not some other key like Alt or Shift are pressed at the same time. Hope it is self explanatory, if not just ask and I provide clarification.
var dblCtrlKey = 0;
Event.observe(document, 'keydown', function(event) {
if (dblCtrlKey != 0 && event.ctrlKey) {
alert("Ok double ctrl");
dblCtrlKey = 0;
} else {
dblCtrlKey = setTimeout('dblCtrlKey = 0;', 300);
}
});
https://jsfiddle.net/3tc26g7x/

function doubleControlEvent() {
if (event.key === 'Control') {
timesCtrlClicked++
if (timesCtrlClicked >= 2) {
console.log('Double control')
// Double Crtl is clicked add your code here
}
setTimeout(() => (timesCtrlClicked = 0), 200)
}
}
let timesCtrlClicked = 0;
document.addEventListener('keyup', doubleControlEvent, true)