我有这个代码为两个文本框设置动态最大值:
var length = document.getElementById('firstBox'),
width = document.getElementById('secondBox');
max1 = 100;
min1 = 20;
max2 = 200;
min2 = 10;
length.onchange = function() {
var maxValue, minValue;
if (width.value < max1) {
maxValue = max2;
minValue = (width.value < min1) ? min1 : min2;
} else {
maxValue = max1;
minValue = min1;
}
if (this.value > maxValue) {
this.value = maxValue;
}
if (this.value < minValue) {
this.value = minValue;
}
};
width.onchange = function() {
var maxValue, minValue;
if (length.value < max1) {
maxValue = max2;
minValue = (length.value < min1) ? min1 : min2;
} else {
maxValue = max1;
minValue = min1;
}
if (this.value > maxValue) {
this.value = maxValue;
}
if (this.value < minValue) {
this.value = minValue;
}
};
效果非常好,只有当客户输入的值高于该框中最低的最大值(max1)时,我才希望将最大值(max2)切换到另一个框。
假设客户在第一个框中键入“150”,然后该框自动被分配max2“200” - 但我想要的是,如果客户在第二个框中输入“150”或任何高于max1的值那么那应该成为max2,这意味着第一个盒子将从它的“150”降低到“100”,就像max1一样。反之亦然。
希望这是可以理解的,否则请告诉我,我会尝试更好地解释它。
答案 0 :(得分:0)
这个想法不是将变量firstbox
和secondbox
保存到符合max1 max1box
的框和符合max2的框,max2box
。 }。
如果逻辑指示切换最大值,则只需切换指针。
var max1box = document.getElementById('length'),
max2box = document.getElementById('width');
max1 = 100;
min1 = 20;
max2 = 200;
min2 = 10;
max1box.addEventListener('change',validateValues);
max2box.addEventListener('change',validateValues);
function validateValues() {
if (this == max1box && this.value > max1 && this.value > max2box.value)
{
max1box = max2box;
max2box = this;
}
if (max1box .value > max1) {
max1box .value = max1;
}
if (max1box .value < min1) {
max1box .value = min1;
}
if (max2box.value > max2) {
max2box.value = max2;
}
if (max2box.value < min2) {
max2box.value = min2;
}
}
您可以在此处看到它:http://jsfiddle.net/Hm2Qn/1/
何时切换规则可能不完全符合您的要求,但您可以从此处获取。