SoFunction
Updated on 2025-04-06

Event altKey,ctrlKey,shiftKey attribute analysis


Function: Detect whether the Alt key is pressed and held down when the event occurs.

grammar:

Value: true | false

illustrate:

The altKey property is true, which means that the Alt key is pressed and maintained when the event occurs. If false, the Alt key is not pressed.
The altKey attribute can be used in combination with the mouse or keyboard, and is mostly used to create some shortcut operation methods.


Function: Detect whether the Ctrl key is pressed and held down when the event occurs.

grammar:

Value: true | false

illustrate:

The ctrlKey property is true, which means that the Ctrl key is pressed and held when the event occurs. If false, the Ctrl key is not pressed.
The ctrlKey property can be used in conjunction with the mouse or keyboard, and is mostly used to create some shortcut operation methods.


Function: Detect whether the Shift key is pressed and held down when the event occurs.

grammar:

Value: true | false

illustrate:

The shiftKey property is true, which means that the Shift key is pressed and held when the event occurs. If false, the Shift key is not pressed.
The shiftKey property can be used in conjunction with the mouse or keyboard, and is mostly used to create some shortcut operation methods.

Example 1
Combination operation example.

Copy the codeThe code is as follows:

<input type="text" value="Hello World!" onclick="checkAlt(event)" />

<script type="text/javascript">
function checkAlt(oEvent)
{
  if( )
    ("txt1").select();
}
</script>


The effect of this code is:

If you hold down the Alt key and click the text box above, you can select the text in the text box.

Example 2
Combination operation example.

Copy the codeThe code is as follows:

<input type="text" value="Hello World!" onclick="clearText(event)" />

<script type="text/javascript">
function clearText(oEvent)
{
  if( && ==46 )
    ("txt2").value = "";
}
</script>


The effect of this code is:

Use the "Ctrl+Del" key combination to clear the content of the text box above. (The text box must be focused first. This example only applies to IE browser.)

Example 3
Combination operation example.

Copy the codeThe code is as follows:

<div style="width:50px; height:25px;border:1px solid black; background-color:red" onclick="setColor(event)"></div>

<script type="text/javascript">
var b = true;
function setColor(oEvent)
{
  if( && b )
    ("box"). = "blue";
  if( && !b )
    ("box"). = "red";
  b = !b;
}
</script>


The effect of this code is:

Press and hold the "Shift" key and click on the color block above with the mouse to change the color block color