我的 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了。
谢谢。
最佳答案
我建议默认禁用提交按钮,只有在用户与输入交互时才启用,就像这样
<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 控件时立即触发,并允许用户还可以选择起始值(如果他愿意的话)
关于javascript - 有没有办法阻止用户在他/她至少移动 slider (输入类型=范围)之前提交表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54423354/