javascript - 有没有办法阻止用户在他/她至少移动 slider (输入类型=范围)之前提交表单？

Question

我的 html 表单中有一个这样的 slider 。它用于在线实验。我已经将它设置为必需，但问题是我想确保用户在提交之前以任何方式操纵了 slider (即至少单击它)。因为 slider 已经默认选择了 50% 的位置，所以用户可以直接单击“确定”而无需真正考虑答案。通过这种方式，我至少可以在行为上迫使他们点击它并做出一些反射(reflection)。

我已经完成了谷歌搜索，但没有找到任何解决方案。

<form id="q-familiarity">
  <label for="fam slider">How well are you familiar with this item ?   </label><br>
  <input name="fam slider" type="range" min="1" max="100" value="50"  step="0.5" class="slider" id="fam-slider" required>
  <button type="submit" form="q-familiarity">OK</button>
<form>

我如何实现一种机制，用户必须至少单击一次 slider 才能“激活”OK 按钮(也许 OK 从灰色变为黑色以指示更改)？

我希望解决方案基于 html 和 css，并尽可能少使用 js。 (为了实验自学了html和css，对js一窍不通)不过我猜想解决方案一定要用到js，这样就ok了。

谢谢。

Answer 1

我建议默认禁用提交按钮，只有在用户与输入交互时才启用，就像这样

Codepen demo

<form>
  <label for="fam slider">How well are you familiar with this item ? </label><br>
  <input type="range" min="1" max="100" value="50" step="0.5"  id="fam-slider" required>
  <button type="submit" id="submit-btt" disabled="disabled">OK</button>
<form>

Js

let slider = document.getElementById('fam-slider');
let button = document.getElementById('submit-btt');
slider.addEventListener('input', () => {
  button.removeAttribute('disabled');
})

在 slider 上的 input 事件中，删除提交按钮上的 disabled 属性。

我使用了 input 事件而不是 change 事件，因为它会在用户拖动 slider 控件时立即触发，并允许用户还可以选择起始值(如果他愿意的话)