Javascript 将HTML多选输入限制为仅连续元素（+；仅shift，忽略+；ctrl）

我有一个标准的HTML多选字段，很像W3学校的示例：

沃尔沃汽车
萨博
法令
奥迪

我的功能要求能够选择多个项目（按住shift键并单击），但只能选择彼此连续的项目。换句话说，忽略[ctrl+click]功能

例如：

允许的：

Volvo
Saab
Fiat

不允许：

Volvo
Fiat

---

有什么想法吗？我可以在JS中进行数据验证和拒绝，但我宁愿从一开始就阻止它。

因为它不是在HTML组件中本机实现的，所以您肯定需要JS来解决这个问题（使用jQuery）

要执行此操作，可以在按下CTRL键时禁用选择：

let ctrlKeyPressed = false;

$(function() {
  document.onkeydown = function(e) {
    if (e.key == 'Meta' || e.key == 'CTRL') {
        ctrlKeyPressed = true;
    }
  }

  document.onkeyup = function(e) {
    if (e.key == 'Meta' || e.key == 'CTRL') {
        ctrlKeyPressed = false;
    }
  }
});

$("option").mousedown(function(e) {
  if (ctrlKeyPressed) {
    e.preventDefault();
  }
});

---

您将找到完整的工作fiddle

，因为它不是在HTML组件中本机实现的，您肯定需要JS来解决这个问题（使用jQuery）

要执行此操作，可以在按下CTRL键时禁用选择：

let ctrlKeyPressed = false;

$(function() {
  document.onkeydown = function(e) {
    if (e.key == 'Meta' || e.key == 'CTRL') {
        ctrlKeyPressed = true;
    }
  }

  document.onkeyup = function(e) {
    if (e.key == 'Meta' || e.key == 'CTRL') {
        ctrlKeyPressed = false;
    }
  }
});

$("option").mousedown(function(e) {
  if (ctrlKeyPressed) {
    e.preventDefault();
  }
});

---

您将找到完整的工作小提琴

，因此当前无法选择连续元素？这就是您需要解决的问题吗？我可以使用click+shift选择连续选项。我的问题是，我只需要限制为连续的元素。使用ctrl+click，用户可以选择多个非连续元素，这是我不想看到的，我不知道纯HTML5是否能够实现这一点。我会做一些挖掘，但我认为js可能是不幸的，因为你目前无法选择连续的元素？这就是您需要解决的问题吗？我可以使用click+shift选择连续选项。我的问题是，我只需要限制为连续的元素。使用ctrl+click，用户可以选择多个非连续元素，这是我不想看到的，我不知道纯HTML5是否能够实现这一点。我会做一些挖掘，但我认为js可能是你不幸的出路谢谢@lukas。我以为是这样的。谢谢你的片段谢谢@lukas。我以为是这样的。谢谢你的片段