Event altKey,ctrlKey,shiftKey屬性解析

Event altKey,ctrlKey,shiftKey屬性解析

 本篇文章主要是對Event altKey,ctrlKey,shiftKey屬性解析了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所協助

event.altKey 

功能：檢測事件發生時Alt鍵是否被按住了。

 

文法：event.altKey

 

取值：true | false

 

說明：

 

altKey屬性為true表示事件發生時Alt鍵被按下並保持，為false則Alt鍵沒有按下。 

altKey屬性可結合滑鼠或鍵盤使用，多用於製作一些快捷操作方式。 

 

event.ctrlKey 

功能：檢測事件發生時Ctrl鍵是否被按住了。

 

文法：event.ctrlKey

 

取值：true | false

 

說明：

 

ctrlKey屬性為true表示事件發生時Ctrl鍵被按下並保持，為false則Ctrl鍵沒有按下。 

ctrlKey屬性可結合滑鼠或鍵盤使用，多用於製作一些快捷操作方式。 

 

event.shiftKey 

功能：檢測事件發生時Shift鍵是否被按住了。

 

文法：event.shiftKey

 

取值：true | false

 

說明：

 

shiftKey屬性為true表示事件發生時Shift鍵被按下並保持，為false則Shift鍵沒有按下。 

shiftKey屬性可結合滑鼠或鍵盤使用，多用於製作一些快捷操作方式。 

 

 執行個體1 

組合操作樣本。

 

代碼如下:

<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> 

 

 

這段代碼的效果為：  

 

如果按住Alt鍵再單擊上面的文字框，可以選中文字框中的文本。

 

 執行個體2 

組合操作樣本。

 

代碼如下:

<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> 

 

 

這段代碼的效果為：  

 

使用"Ctrl+Del"按鍵組合可清除上面的文字框的內容。（必須先使文字框獲得焦點。本例只適用於IE瀏覽器。）

 

 執行個體3 

組合操作樣本。

 

代碼如下:

<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> 

 

 

這段代碼的效果為：

 

按住"Shift"鍵並用滑鼠點擊上面的色塊，可改變色塊顏色