event.altKey
Function: Detect whether the Alt key is pressed when the event occurs.
Syntax: event.altKey
Value: true | false
illustrate:
The altKey attribute is true to indicate that the Alt key was pressed and held when the event occurred, and false to indicate that the Alt key was not pressed.
The altKey attribute can be used in combination with the mouse or keyboard, and is mostly used to create some shortcut operations.
event.ctrlKey
Function: Detect whether the Ctrl key is pressed when the event occurs.
Syntax: event.ctrlKey
Value: true | false
illustrate:
If the ctrlKey attribute is true, it means that the Ctrl key was pressed and held when the event occurred. If it is false, the Ctrl key was not pressed.
The ctrlKey attribute can be used in conjunction with the mouse or keyboard, and is mostly used to create some shortcut operations.
event.shiftKey
Function: Detect whether the Shift key is pressed when the event occurs.
Syntax: event.shiftKey
Value: true | false
illustrate:
If the shiftKey property is true, it means that the Shift key was pressed and held when the event occurred. If it is false, the Shift key was not pressed.
The shiftKey attribute can be used in combination with the mouse or keyboard, and is mostly used to create some shortcut operations.
Example 1
Example of combined operations.
Copy the code code as follows:
<input id="txt1" type="text" value="Hello World!" onclick="checkAlt(event)" />
<script type="text/javascript">
function checkAlt(oEvent)
{
if(oEvent.altKey)
document.getElementById("txt1").select();
}
</script>
The effect of this code is:
If you hold down the Alt key and click on the text box above, you can select the text in the text box.
Example 2
Example of combined operations.
Copy the code code as follows:
<input id="txt2" type="text" value="Hello World!" onclick="clearText(event)" />
<script type="text/javascript">
function clearText(oEvent)
{
if( oEvent.ctrlKey && oEvent.keyCode==46 )
document.getElementById("txt2").value = "";
}
</script>
The effect of this code is:
Use the "Ctrl+Del" key combination to clear the contents of the text box above. (The text box must be focused first. This example only applies to IE browser.)
Example 3
Example of combined operations.
Copy the code code as follows:
<div id="box" onclick="setColor(event)"></div>
<script type="text/javascript">
var b = true;
function setColor(oEvent)
{
if( oEvent.shiftKey && b )
document.getElementById("box").style.backgroundColor = "blue";
if( oEvent.shiftKey && !b )
document.getElementById("box").style.backgroundColor = "red";
b = !b;
}
</script>
The effect of this code is:
Hold down the "Shift" key and click on the color block above with the mouse to change the color of the color block.