0

我有一组输入，对于我输入的每个值，我都有一个“范围”滑块和一个“数字”输入。我有一点 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 中的配对值，但文字将被动态表达式替换，因此我可以绑定整个范围的滑块/文本数字输入对。

4

3 回答 3

1

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

于 2012-05-29T03:43:10.480 回答
1

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

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

                               
               

于 2012-05-29T03:46:46.897 回答
1

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

要获得更及时的反馈，您应该使用：

onmousedown onmouseup滑块上的事件，您还可以使用onmousemove“实时”效果。 onkeypress在文本字段上。

于 2012-05-29T04:05:01.413 回答