JavaScript Shift, Ctrl, Alt-Click an element

在设计网页开发中、有时候会需要判断使用者是否按下了某些功能键，例如 Shift、Ctrl、Alt 等。这些功能键可以和其他键组合，产生不同的效果。例如按下 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

如果「按下」功能键 Alt、Control、Shift 和 Meta 的 Event 事件。

使用 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 则加总其选择的数字。

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);
});