如果微调器为空白，微调器不会完全显示正确的数字

Question

我有 5 个几乎可以完美运行的微调器，只有一个小故障我无法克服。

假设发生的情况是，如果微调器为空白，则无论该微调器中的前一个数字是什么，它都会显示该前一个数字。

它所做的是在 5 个微调器中的任何一个中输入任何先前的数字，它会在空白微调器中显示该数字。

那么，如果微调器为空白，我该如何获取它以显示该微调器的前一个数字，而不是显示从空白微调器中的任何微调器输入的最后一个前一个数字？

以下是我的微调器代码：

     function Spinner(elem,min, max){
 this.elem = elem;
 this.elem.value = min;
 this.min = min;
 this.max = max;
 this.timer;
 this.speed = 150; //milliseconds between scroll values
 var selfO = this;

 this.elem.onkeyup = function(){
    var regex = /^[0-9]*$/;
    if(!regex.test(selfO.elem.value)){
    selfO.elem.value = selfO.elem.value.substring(0,selfO.elem.value.length-1);
                            return;
                        }
                        selfO.validateValue();
                    }

      this.validateValue = function(){
      if(Number(selfO.elem.value) > selfO.max) {selfO.elem.value = selfO.max;}
      if(Number(selfO.elem.value) < selfO.min) {selfO.elem.value = selfO.min;}
                    }

                    this.stopSpinning = function(){
                        clearTimeout(selfO.timer);
                    }

                    this.spinValue = function(dir){
                        selfO.elem.value = Number(selfO.elem.value) + dir;
                        selfO.validateValue();
                        selfO.timer = setTimeout(function(){selfO.spinValue(dir);},selfO.speed);
                    }

                };

           window.onload=function(){
                        //create the Spinner objects
                        var SpinnerHours = new Spinner(document.getElementById('txtHours'),0,23);                
                        var SpinnerMins = new Spinner(document.getElementById('txtMins'),0,59);
                        var SpinnerSecs = new Spinner(document.getElementById('txtSecs'),0,59);
                        var SpinnerWeight = new Spinner(document.getElementById('txtWeight'),0,100);
                        var SpinnerQuestion = new Spinner(document.getElementById('txtQuestion'),0,100);

                        document.getElementById('txtHours').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtMins').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtSecs').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtWeight').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtQuestion').onblur = function(){ this.value = cleanSpin(this.value);}

            function cleanSpin(obj) {
                if(obj > 0) {
                    var str = obj.replace(/^0*/,'');
                    lastSpin = str;
                    return str;
                }
                else {
                    return lastSpin;
                }
            }

            var lastSpin = 1;

Answer 1

问题在于您的 lastSpin 变量，实际上是您的 cleanSpin() 函数，都在全局范围内，因此在所有 Spinner 实例之间共享。

相反，您应该尝试将cleanSpin 方法或其变体添加到Spinner“类”，使其成为该 Spinner 实例的本地方法。

编辑：这是完整的 Javascript 来说明我的意思。我根本没有对此进行测试，因为我没有执行此操作所需的其余代码，但希望您能看到我所做的更改：

function Spinner(elem, min, max) {
    this.elem = elem;
    this.elem.value = min;
    this.min = min;
    this.max = max;
    this.timer;
    this.speed = 150; //milliseconds between scroll values
    this.lastSpin = 1; // added lastSpin as a property of the Spinner
    var selfO = this;

    this.elem.onkeyup = function() {
        var regex = /^[0-9]*$/;
        if (!regex.test(selfO.elem.value)) {
            selfO.elem.value = selfO.elem.value.substring(0, selfO.elem.value.length - 1);
            return;
        }
        selfO.validateValue();
    }

    // I have added the onblur function inside the Spinner "class"
    this.elem.onblur = function() {
        if (self0.elem.value > 0) {
            var str = self0.elem.value.replace(/^0*/, '');
            self0.lastSpin = str;
            self0.elem.value = str;
        }
        else {
            self0.elem.value = lastSpin;
        }
    };

    this.validateValue = function() {
        if (Number(selfO.elem.value) > selfO.max) {
            selfO.elem.value = selfO.max;
        }
        if (Number(selfO.elem.value) < selfO.min) {
            selfO.elem.value = selfO.min;
        }
    };

    this.stopSpinning = function() {
        clearTimeout(selfO.timer);
    };

    this.spinValue = function(dir) {
        selfO.elem.value = Number(selfO.elem.value) + dir;
        selfO.validateValue();
        selfO.timer = setTimeout(function() {
            selfO.spinValue(dir);
        }, selfO.speed);
    };

};

window.onload = function() {
    //create the Spinner objects
    var SpinnerHours = new Spinner(document.getElementById('txtHours'), 0, 23);
    var SpinnerMins = new Spinner(document.getElementById('txtMins'), 0, 59);
    var SpinnerSecs = new Spinner(document.getElementById('txtSecs'), 0, 59);
    var SpinnerWeight = new Spinner(document.getElementById('txtWeight'), 0, 100);
    var SpinnerQuestion = new Spinner(document.getElementById('txtQuestion'), 0, 100);
}