有没有办法直接绑定到观察箭头的“数字”输入字段？

Question

我有一组输入，对于我输入的每个值，我都有一个“范围”滑块和一个“数字”输入。我有一点 JS 由滑块和数字字段调用，每个输入都使用 onchange="send(input_id, input_kind, this.value)" 属性。 如果滑块移动了，我会更新数字，如果数字改变了，我会更新滑块。

这对滑块来说很好，只要一个人移动它，数字就会开始跟踪。当使用小向上/向下箭头调整数字或键入数字时，滑块不会更新。在选择另一个字段之前不会调用 JS，即输入失去焦点然后将其数据传递给我的 bind{k, d, v} 函数。

HTML：

            <div class="number-pair">
                <sub-title>X-Position</sub-title><br />
                <input id="/layout/1/slider" class="slider" type="range" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'slider', parseFloat(this.value))" />
                <input id="/layout/1/number" class="number-box" type="number" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'number', parseFloat(this.value))" /><br />    
            </div>

JS：

        function bind(id, control, v)
        { 
            if (control=="slider")
            {
            if (console) console.log("It's a slider");
                e = document.getElementById("/layout/1/number");
                if (e)
                {
                    e.value = v;
                }
            } else if (control=="number")
            {
            if (console) console.log("It's a float");                   
                e = document.getElementById("/layout/1/slider");
                if (e)
                {
                    e.value = v;
                }
            }
        }

如何使用数字箭头获得响应更快的绑定？

注意我不仅将两个输入相互绑定，还绑定到其他地方的屏幕效果，因此在这种情况下移动响应式绑定是可取的，而不仅仅是我可以使用的滑块。 此外，我使用文字来更新我的 JS 中的配对值，但文字将被动态表达式替换，因此我可以绑定整个范围的滑块/文本数字输入对。

Answer 1

在输入字段上，绑定到onkeypress，而不是onchange 事件，因为在控件失去焦点之前不会调用onchange 事件。要捕获箭头按下，请绑定到 onclick 事件。

Answer 2

你为什么不尝试使用 onkeypress 和 onclick：

            <div class="number-pair">
<br />

Answer 3

onchange 仅在元素失去焦点时触发事件。

您应该使用更具响应性的反馈：

onmousedownonmouseup滑块上的事件，您也可以使用onmousemove来“实时”效果。 onkeypress 在文本字段中。