Laurence L Laurence L - 3 months ago 9
Javascript Question

Keycodes ALT + SHIFT + number

I am trying to use ALT + SHIFT + number. I have tried:

This is using jQueryUI Drag and Drop. I have not included the .sortable code section.

var dest = "";

$(".e01").on("keydown", "#activity_contents a", function (e) {
"use strict";
if (e.altKey && ( e.which === 49 )) {
dest = "tier1";
$('p.ethel').remove();
$('#col_1').append('<p class="ethel sr-only">Item moved to Step 1</p>');


} else if (e.altKey && ( e.which === 50 )) {
dest = "tier2";
$('p.ethel').remove();
$('#col_2').append('<p class="ethel sr-only">Item moved to Step 2</p>');

} else if (e.altKey && ( e.which === 51 )) {
dest = "tier3";
$('p.ethel').remove();
$('#col_3').append('<p class="ethel sr-only">Item moved to Step 3</p>');

} else if (e.altKey && ( e.which === 52 )) {
dest = "tier4";
$('p.ethel').remove();
$('#col_4').append('<p class="ethel sr-only">Item moved to Step 4</p>');

} else if (e.altKey && ( e.which === 53 )) {
dest = "tier5";
$('p.ethel').remove();
$('#col_5').append('<p class="ethel sr-only">Item moved to Step 5</p>');

} else if (e.altKey && ( e.which === 54 )) {
dest = "tier6";
$('p.ethel').remove();
$('#col_6').append('<p class="ethel sr-only">Item moved to Step 6</p>');

} else {
return false;
}
$("#"+dest).append($(this).parent());
var count = $("#choices li").size();
if (count > 0) {
$('.ethan').remove();
focusNow = $("#choices a").first().prepend('<span class="ethan sr-only">focus is on ' + $("#choices a:first").text() + '</span>');

} else {
focusNow = $("#check_activity");
}

focusNow.focus();

if (count === 0) {
$('.ernie').remove();
$("#choices").append('<p class="ernie gone sr-only">That was the last ingredient</p>');
}

if (count === 1) {
$('.ernie').remove();
$("#choices").append('<p class="ernie sr-only">There is 1 more ingredient to select</p>');

}
if (count === 2) {
$('.ernie').remove();
$("#choices").append('<p class="ernie sr-only">There are 2 ingredients to select</p>');

}
if (count === 3) {
$('.ernie').remove();
$("#choices").append('<p class="ernie sr-only">There are 3 ingredients to select</p>');

}
if (count === 4) {
$('.ernie').remove();
$("#choices").append('<p class="ernie sr-only">There are 4 ingredients to select</p>');

}
if (count === 5) {
$('.ernie').remove();
$("#choices").append('<p class="ernie sr-only">There are 5 ingredients to select</p>');

}
if (count === 6) {
$('.ernie').remove();
$("#choices").append('<p class="ernie sr-only">There are 6 ingredients to select</p>');

}
});


HTML

Drag and Drop Flowchart


Drag and drop the ingredients into the correct order to make a jam sandwich.


<div id="activity">
<div id="activity_contents">
<div id="columns" class="clearfix">
<div id="col_1" class="column">
<div class="column_head"> Step One </div>
<ul id="tier1" class="connected" role="region" aria-label="droppable area 1">
</ul>
<div class="clearfix"></div>
</div>
<div id="col_2" class="column">
<div class="column_head"> Step Two </div>
<ul id="tier2" class="connected" role="region" aria-label="droppable area 2">
</ul>
</div>
<div id="col_3" class="column last">
<div class="column_head"> Step Three </div>
<ul id="tier3" class="connected" role="region" aria-label="droppable area 3">
</ul>
</div>
<div id="col_4" class="column">
<div class="column_head"> Step Four </div>
<ul id="tier4" class="connected" role="region" aria-label="droppable area 4">
</ul>
<div class="clearfix"></div>
</div>
<div id="col_5" class="column">
<div class="column_head"> Step Five </div>
<ul id="tier5" class="connected" role="region" aria-label="droppable area 5">
</ul>
<div class="clearfix"></div>
</div>
<div id="col_6" class="column">
<div class="column_head"> Step Six </div>
<ul id="tier6" class="connected" role="region" aria-label="droppable area 6">
</ul>
<div class="clearfix"></div>
</div>
</div>
<div id="well" class="clearfix" role="region" aria-label="dragable list items">
<span class="sr-only">Use alt+1, alt+2 or alt+3 to move the item into Tier 1, Tier 2, or Tier 3</span>
<ul id="choices" class="connected">
<li id="ch02" class="choice"><a href="#">put jam on bread</a></li>
<li id="ch05" class="choice"><a href="#">Get jam</a></li>
<li id="ch04" class="choice"><a href="#">Get bread</a></li>
<li id="ch06" class="choice"><a href="#">Put bread on plate</a></li>
<li id="ch01" class="choice"><a href="#">Place two slices together to make a sandwich</a></li>
<li id="ch03" class="choice"><a href="#">Get jammed bread</a></li>
</ul>
</div>
</div>

<div id="activity_footer" class="clearfix" role="region" aria-label="check and reset buttons">
<a href="#" id="check_activity" class="activity_button" title="Check my answers" >Check</a>
<a href="#" id="reset_activity" class="activity_button" title="Clear my answers" >Reset</a>

</div>
<div id="result" class="result-alert">
<div id="result-txt" class="result-message"></div>
</div>
</div>
</div>


Instead of just alt + number I want to use alt + shift + number. Ultimately I'd like to have the spacebar select or grab the div, tab to the drop container and and use enter to drop. But have not worked out how :-)

if (e.which === 18 && e.which === 16 && e.which === 49) {
//DO SOMETHING
}
if (e.altKey && ( e.which === 16 ) && ( e.which === 49 )) {
//DO SOMETHING
}
if (e.which === 18) && (e.which === 16) && e.which === 49) {
//DO SOMETHING
}


None of them work. Can someone show me how to combine these keys please.

Answer

You want to use the shiftKey flag. Similarly to how you use the altKey flag.

if (e.altKey && e.shiftKey && ( e.which === 49 )) {
    //DO SOMETHING
}
Comments