时间戳

首页 > 解决方案 > 将 HTML 多选输入限制为仅连续元素（仅 +shift，忽略 +ctrl）

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

问题描述

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

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

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

例如：

允许：

Volvo
Saab
Fiat

不允许：

Volvo
Fiat

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

标签： javascripthtml

解决方案

由于它不是在selectHTML 组件中原生实现的，因此您肯定需要 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();
  }
});

你会在这里找到完整的工作小提琴

推荐阅读