I want spinner (numeric up/down field) to display numbers properly

[malcom p]

I have 2 questions:

 

Question 1: I have a spinner function and I have one slight problem with it. If a user types in 00000009 or 00021 in the spinner for example, if the user clicks away from the spinner, it will still display 00000009 or 00021 in the spinner. What I want is that if something like this happens, then what I want is that when the user clicks away, I want the spinner to display it as 9 or 21 rather than 00000009 or 00021. I don't know how to do this though. Does anyone know how to overcome this:

 

Question 2: If I used backspace to remove a number from a spinner and that is left with a blank spinner, what needs to be done so that if I click away from the spinner, the last number in the spinner re-appears in the spinner?

 

My main spinner function:

        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);
    }

[Adam]

Answer 1:

 

Just run the value through parseInt(). Integers don't have leading 0s, so they will be ignored / stripped out in the return value.

 

Answer 2:

 

'onchange' of the input I would record the last valid number in a variable. 'onblur' if the input was then empty/invalid, I would then set the value to the history variable. I'm not going to implement it into your object, but here's a simplified example:

 

<script>
    window.onload = function()
    {
        var input = document.getElementById('history_input');
        var history;

        input.onchange = function()
        {
            if (this.value.match(/^[0-9]+$/)) {
                history = this.value;
            }
        }

        input.onblur = function()
        {
            if (!this.value.match(/^[0-9]+$/)) {
                if (typeof history != 'undefined') {
                    this.value = history;
                } else {
                    this.value = '';
                }
            }
        }
    }
</script>

<input type="text" id="history_input">