JavaScript Shift, Ctrl, Alt-Click an element

在設計網頁開發中、有時候會需要判斷使用者是否按下了某些功能鍵,例如 ShiftCtrlAlt 等。這些功能鍵可以和其他鍵組合,產生不同的效果。例如按下 Ctrl + C 可以複製選取的文字,按下 Shift + Enter 可以換行而不提交表單。JavaScript 可以讓簡單地獲取功能鍵的狀態,使用 KeyboardEvent.getModifierState() 接受參數,表示要查詢的功能鍵的名稱,並返回一個布林值,表示該功能鍵是否被按下。滑鼠及鍵盤功能鍵 KeyboardEvent.getModifierState() 方法返回指定功能鍵的當前狀態 Boolean

如果滑鼠點下欄位時且 State Key 功能鍵處於按下狀態則為返回 true 否則為 false。

var active = event.getModifierState(keyArg);

設置的 keyArg 功能鍵值、必須是代表功能鍵的 KeyboardEvent.key 的參數值例如 :
Alt, Control, Shift 以及 CapsLock 大小寫鍵的「按下狀態」啟用狀態。

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState


如果「按下」功能鍵 AltControlShiftMetaEvent 事件。

使用 JavaScript event.getModifierState() 早期使用 event.altKey、event.ctrlKey、event.shiftKey 和 event.metaKey。



欄位的 Ctrl 及滑鼠點選

線上範例,但如果使用 Internet Explorer 則出現、不支援此動作。Field Input Keyboard Ctrl + Mouse Click
嘗試於下方的輸入 TEXT 欄位、滑鼠點下欄位時、如果同時按下鍵盤 Ctrl 則 clickResult 為 true。

<input type="text" id="readyClick" onclick="fieldClick()" value="Ready Click" />

Ctrl + Click

function fieldClick() {
  const inputField = document.getElementById("readyClick");
  try {
    const evt = new MouseEvent("click");
    const clickResult = event.getModifierState("Control"); // Control, Shift, Alt
    inputField.value = clickResult;
    if (clickResult) {
      // 如果事件是驗證 if the event was validation
      inputField.select(); // 滑鼠點下欄位時如果當時按下 Control 則為 true selected.
    }
  } catch (e) {
    // IE Object doesn't support this action
    inputField.value = ("發生錯誤 = " + e.message);
  }
}

JavaScript 建立 new MouseEvent 滑鼠 Click 點下欄位時,例如當時功能鍵 Control, Shift, Alt 功能鍵處於活動狀態,則判斷為 true、再進行當功能鍵按下狀態的處理程式。
try, catch 則判斷 Internet Explorer 發生錯誤 = 物件不支援此動作 Object doesn't support this action。



範例說明

而當前主要瀏覽器,滑鼠 Click 點下欄位時,如果已經按下 Control 功能鍵,可以自動選取欄位中的文字。
The current browser, when the mouse Click clicks on the field, if the Control function key has been pressed, the characters in the field can be automatically selected.



jQuery Event 功能鍵 shiftKey + click

滑鼠點選數字,如果按下鍵盤 Shift 則加總其選擇的數字。

123456
0

var total = 0;
$("div.m-select span").on("click", function (event) {
  var s = window.event.shiftKey;
  if (s) {
    total = total + parseInt( $(this).text() );
  } else {
    total = parseInt( $(this).text() );
    $("div.m-select span").removeClass("actived");
  }
  $(this).addClass("actived");
  $("div.select-result").text(total);
});