Menu
This is a proof of concept question … that I’ve been unable to prove. 😡
Ultimate goal to is allow one button to have different actions with the Shift, Control or Alt key pressed for a link “<a…>” or a button (“<input type=’button’…” or “<button>….”) click.
The following appears to work in FF and MSIE on PC (with some side-effects),
but not at all on a iMac using FF or Safari.
The display in the textarea shows that I can detect when the Shift, Control or Alt keys are pressed and an event is created with a mouse click.
With a left mouseClick, the display shows
“001” when shift key is held
“010” when the control key is held
and
“100” when the alt key is held.
I can change the colors, for all EXCEPT the Control key. I’m not sure why because I see the status flag setting (010) correct when key is held and mouse is clicked on the link or the button.
Question #1
Is there a fundamental concept I’m overlooking here using the iMac? 😮
Is there a way to test for the “apple” key being pressed instead of the Ctrl?
Question #2
The PC version changes colors, but it also presents an un-intended dropdown selection.
Is there something about the “Control” key that is different from the other keys being pressed?
Here’s the short code with the testing display included:
[code]
<html>
<head>
<title>Events with Shift, Ctrl or Alt pressed</title>
<SCRIPT type=”text/javascript”>
var acsFlag = ‘000’; // status flag of S, C and A keys
function modifiers(e) {
acsFlag = ((e.altKey) ? ‘1’ : ‘0’) + ((e.ctrlKey ? ‘1’ : ‘0’) + ((e.shiftKey) ? ‘1’ : ‘0’));
document.getElementById(‘controlledArea’).innerHTML = acsFlag; // for testing purposes
return false;
}
function checkClrButton() {
switch (acsFlag) {
case “001” : aColor = ‘#ffff00’; break; // shft
case “010” : aColor = ‘#00ff00’; break; // ctrl
case “100” : aColor = ‘#00ffff’; break; // alts
default : aColor = ‘#f0f0f0’; break; // none – possibly “011”, “101”, “110” and “111”
}
document.getElementById(‘controlledArea’).style.backgroundColor = aColor;
return false;
}
</SCRIPT>
</head>
<body>
<div id=”controlledArea” style=”height:200; width:300; border:1px solid blue; background-color:#ffffff”></div>
<p><input type=”button” value=”Colors” onMouseDown=”return modifiers(event)” onClick=”return checkClrButton()”>
<P>Hold SHIFT, CONTROL or ALT key <br> and click mouse to
<a href=”javascript:void()” onMouseDown=”return modifiers(event)” onClick=”return false”>Show Status</a>
</body>
</html>
Any idea what’s going on here. Events seem to be my albatross in JS. 😮