我可以使范围输入的值在点击时递增和递减吗? [英] Can I make a range input's value step up and down on click?
问题描述
说我有一个<input type=range min=0 max=100 step=1 />.如果我集中输入，然后使用键盘上下移动，则值会相应地更改.当我单击范围内的任意点时，该值将跳至单击鼠标的位置.这对于许多应用程序来说很有意义，但是我可以更改此行为以使值逐步增大或减小，就像我向上或向下移动箭头键一样吗?这对于许多科学应用都是有意义的.
Say I have an <input type=range min=0 max=100 step=1 />. If I focus the input, then move up and down with the keyboard, the value changes accordingly. When I click an arbitrary point along the range, the value jumps to where I clicked my mouse. That makes sense for many applications, but can I alter this behavior to make the value step up and down instead, as if I had moved the arrow keys up or down? This makes sense for many scientific applications.
在范围输入的规格中，我找不到有关鼠标行为的专门信息: https://html.spec.whatwg.org/#range-状态-(类型=范围)
I couldn't find info specifically on mouse behavior in the range input's spec here: https://html.spec.whatwg.org/#range-state-(type=range)
也许有人在回答吗?
推荐答案
您可以执行以下操作.
<!DOCTYPE html>
<script> var oldValue = 50; </script>
<input type=range max=100 step=1 oninput=" if (oldValue) { this.value = this.value > oldValue ? oldValue + 1 : oldValue - 1; } oldValue = parseInt(this.value, 10);">
这篇关于我可以使范围输入的值在点击时递增和递减吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
