javascript - 有没有办法直接绑定(bind)到监视箭头的 "number"输入字段？

Question

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

这对于 slider 来说很好，一旦移动它，数字就会开始跟踪。当用户使用小向上/向下箭头调整数字或键入数字时， slider 不会更新。在选择另一个字段之前，不会调用 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;
                }
            }
        }

如何获得使用数字箭头时响应速度更快的绑定(bind)？

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

Answer 1

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