Event altKey, ctrlKey, shiftKey attribute Parsing

Event altKey, ctrlKey, shiftKey attribute Parsing

This article mainly analyzes the Event altKey, ctrlKey, and shiftKey attributes in detail. If you need a friend, you can refer to them and hope to help you.

Event. altKey

Function: checks whether the Alt key is held down when an event occurs.

 

Syntax: event. altKey

 

Value: true | false

 

Note:

 

If the altKey attribute is true, the Alt key is pressed and maintained when the event occurs. If the attribute is false, the Alt key is not pressed.

The altKey attribute can be used with the mouse or keyboard to create shortcuts.

 

Event. ctrlKey

Function: checks whether the Ctrl key is held down when an event occurs.

 

Syntax: event. ctrlKey

 

Value: true | false

 

Note:

 

If the ctrlKey attribute is true, the Ctrl key is pressed and maintained when the event occurs. If the value is false, the Ctrl key is not pressed.

The ctrlKey attribute can be used with the mouse or keyboard to create shortcuts.

 

Event. shiftKey

Function: checks whether the Shift key is held down when an event occurs.

 

Syntax: event. shiftKey

 

Value: true | false

 

Note:

 

If the shiftKey attribute is true, the Shift key is pressed and maintained when the event occurs. If it is false, the Shift key is not pressed.

The shiftKey attribute can be used with the mouse or keyboard. It is mostly used to create shortcuts.

 

Instance 1

Combined Operation example.

 

The Code is 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 press the Alt key and click the text box above, you can select the text in the text box.

 

Instance 2

Combined Operation example.

 

The Code is 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 content of the text box above. (Focus must be obtained for the text box first. This example only applies to IE browsers .)

 

Instance 3

Combined Operation example.

 

The Code is as follows:

<Div id = "box" 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 (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:

 

Press and hold the "Shift" key and click the color block above to change the color block.